Соответствие div с помощью onclick

Мне нужна помощь с совпадением двух div, которые используют onclick и исчезают, когда они совпадают.Соответствие 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; 
}

Как вы можете видеть, когда вы нажимаете их, они меняются изображения в другое изображение, которое имеет изюминку (добавлено фотошопом). Поэтому я делаю игру, которая должна соответствовать изображению по логотипу и оружию. Так, например, у меня есть логотип halo, и вы должны соответствовать оружию, которое принадлежит игре. Так что до сих пор у меня есть только гало-меч, потому что я хочу сопоставить одно оружие и логотип, прежде чем добавлять больше.

источник

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

ответ

Смежные вопросы