匹配div的使用onclick

我需要幫助匹配使用onclick的兩個div，並在匹配時消失。匹配div的使用onclick

<html> 
     <head> 
     <script src='jquery.min.js'></script> 
      <script src='move.js'></script> 
      <link href='style.php' rel='stylesheet' type='text/css'/> 
     </head> 
     <body> 
      <div id='holder'> 
       <div class='box logo0' id='bo1' ></div> 
       <div class='box logo1' id='bo2'></div> 
       <div class='box logo2' id='bo3'></div> 
       <div class='box logo3' id='bo4'></div> 
       <div class='box logo4' id='bo5'></div> 
       <div class='box logo5' id='bo6'></div> 
      </div> 


     </audio> 
     </body> 
    </html>

我想匹配div id="bo3"和div id="bo4"

這裏是我的javascript：

$(document).ready(function(){ 
    animateDiv('#bo1'); 
    animateDiv('#bo2'); 
    animateDiv('#bo3'); 
    animateDiv('#bo4'); 
     $('#bo1').click(function(){ 
     $(this).toggleClass('logo0 down0'); 
    }); 
     $('#bo2').click(function(){ 
     $(this).toggleClass('logo1 down1'); 
    }); 
     $('#bo3').click(function(){ 
     $(this).toggleClass('logo2 down2'); 
    }); 
    $('#bo4').click(function(){ 
     $(this).toggleClass('logo3 down3'); 
    }); 
}); 


function makeNewPosition(){ 

    // Get viewport dimensions (remove the dimension of the div) 
    var h = $(window).height() - 50; 
    var w = $(window).width() - 50; 

    var nh = Math.floor(Math.random() * h); 
    var nw = Math.floor(Math.random() * w); 

    return [nh,nw];  

} 

function animateDiv(divtag){ 
    var newq = makeNewPosition(); 
    var oldq = $(divtag).offset(); 
    var speed = calcSpeed([oldq.top, oldq.left], newq); 

    $(divtag).animate({ top: newq[0], left: newq[1] }, speed, function(){ 
     animateDiv(divtag);   
    }); 
}; 

function calcSpeed(prev, next) { 

    var x = Math.abs(prev[1] - next[1]); 
    var y = Math.abs(prev[0] - next[0]); 

    var greatest = x > y ? x : y; 

    var speedModifier = 0.1; 

    var speed = Math.ceil(greatest/speedModifier); 

    return speed; 

} 
function changeImage(ImageID,ImageFileName) 
{ 
document.getElementById(ImageID).src = ImageFileName; 
}

正如你可以看到當你點擊他們，他們交換圖像具有亮點的其它圖像（由Photoshop添加）。所以我正在製作一款遊戲，您必須通過徽標和武器來匹配圖片。舉例來說，我有暈徽標，你必須匹配屬於遊戲的武器。所以我只有光環劍，因爲我想在添加更多之前匹配一個武器和徽標。

來源

2014-04-10 userj07

我假設你希望這是一種遊戲，你點擊一個框然後突出顯示，目標是點擊它的匹配。如果單擊了匹配項，則該對將消失，如果單擊了不匹配的框，則兩者都將變爲高亮顯示，準備下一次嘗試。

您需要的第一件事就是確定是否已選擇哪個方框。最簡單的做法是在現有的toggle語句中添加一個額外的類，例如： $(this).toggleClass('logo2 down2 selected');對所有框使用相同的名稱。然後您可以找到所選框：

var selected = $("div.box.selected");

您還需要一種以編程方式確定哪些項匹配的方法。這可以是由服務器提供的數組中的類名稱映射，圖像url部分中的字符串匹配，單擊函數中的硬編碼匹配或許多其他選項。

僅通過實例的方式，如果bo3將總是匹配bo4，你可以使用單擊處理如下：

$('#bo3').click(function(){ 
    // find out if any boxes are selected 
    var selected = $("div.box.selected"); 
    if (selected.length) > 0 { 
     // if the selected box is our match, add the matched class 
     // your stylesheet can determine matched means invisible, special location, whatever 
     if (selected.first().attr("id") == "bo4" { 
     $("#bo3,#bo4").removeClass("selected").addClass("matched"); 
     } elseif (selected.first().attr("id") == "bo3" { 
     // this element got re-clicked, just deselect 
     $(this).toggleClass('logo2 down2 selected'); 
     } else { 
     // if we didn't match, send the click event to whatever was selected to deselect it 
     selected.click(); 
     } 
    } else { 
     // if nothing else was selected, this element should toggle. 
     $(this).toggleClass('logo2 down2 selected'); 
    } 
}); 

// essentially the same for the matching box 
$('#bo4').click(function(){ 
    var selected = $("div.box.selected"); 
    if (selected.length) > 0 { 
     if (selected.first().attr("id") == "bo3" { 
     $("#bo3,#bo4").removeClass("selected").addClass("matched"); 
     } elseif (selected.first().attr("id") == "bo4" { 
     $(this).toggleClass('logo3 down3 selected'); 
     } else { 
     selected.click(); 
     } 
    } else { 
     $(this).toggleClass('logo3 down3 selected'); 
    } 
});

很多，這可能在一個由點擊處理程序調用的函數定義以減少代碼重複，但我會留給你。

來源

2014-04-10 17:46:35 Joe

匹配div的使用onclick

回答

相關問題