Question

我需要帮助匹配两个使用onclick的div，并在匹配时消失。

<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添加）。所以我正在制作一个游戏，你必须通过徽标和武器匹配图像。所以，例如，我有光晕标志，你必须匹配属于游戏的武器。所以到目前为止我只有光环剑，因为我想在添加更多之前匹配一个武器和徽标。

Answer 1

我假设您希望这是一种游戏，您点击一个框，然后突出显示，目标是单击其匹配。如果点击了匹配，则该对消失，如果单击一个不匹配的框，则两者都变为去突出显示，为下一次尝试做好准备。

您需要的第一件事是确定是否已选择哪个框以及选择哪个框。最简单的方法是在现有的切换语句中添加一个额外的类，如： $(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');
    }
});

其中大部分内容可以在点击处理程序调用的函数中定义，以减少代码重复，但我会将其留给您。

使用onclick匹配div

1 个答案: