2 div 之间的 jquery 冲突不起作用

Question

我正在尝试检查 2 个 div 之间的碰撞，它仅适用于第一个 div。可能是什么问题。 My fiddle is here

$(document).ready(function () {
        $("#txt").keydown(function(pk){
            var pos = $('#myCar').position();

            if(pk.keyCode == '37')
            {
                $('#myCar').css('left', pos.left - 10 + 'px');
            }
            if(pk.keyCode == '38')
            {      
                $('#myCar').css('top', pos.top - 10 + 'px');
            }
            if(pk.keyCode == '39')
            {
                $('#myCar').css('left', pos.left + 30 + 'px');
            }
            if(pk.keyCode == '40')
            {
                $('#myCar').css('top', pos.top + 10 + 'px');
            }

        });
        function collision($div1, $div2) {
            var x1 = $div1.offset().left;
            var y1 = $div1.offset().top;
            var h1 = $div1.outerHeight(true);
            var w1 = $div1.outerWidth(true);
            var b1 = y1 + h1;
            var r1 = x1 + w1;
            var x2 = $div2.offset().left;
            var y2 = $div2.offset().top;
            var h2 = $div2.outerHeight(true);
            var w2 = $div2.outerWidth(true);
            var b2 = y2 + h2;
            var r2 = x2 + w2;

            if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
            return true;
        }

        //detect collision for every 2 seconds
        window.setInterval(function () {
            $('#result').text(collision($('#myCar'), $('.otherCar')));
        }, 200);

        });

Answer 1

问题是在这种情况下，使用 jQuery 选择器 $('.otherCar') 实际上并没有使用该类的所有元素。当您尝试从这样的类选择器中获取特定值时，它无法返回每个元素的所有值并使用您的逻辑，因此它只会给您其中一个值。

在这种情况下，您将需要使用 jQuery 的 .each():

    //detect collision for every 2 seconds

    window.setInterval(function () {
        $('#result').text('False');
        $.each($('.otherCar'),function(){
            if(collision($('#myCar'), $(this))){
                $('#result').text('True');
            }
        });
    }, 200);

基本上，我使用与您相同的所有代码，但我使用 .each() 循环遍历该选择器中的每个元素，然后运行您的 collision() 函数(使用 $(this) 选择器获取循环中的当前元素)

在循环之前，我将结果文本重置为“False”，然后继续检查元素。如果没有发现是真的，这将保持为“假”，并且可以继续。

我将函数调用包装在 if() 语句中，因此如果函数返回 true，条件将评估为 true，并将结果文本更改为“True”。

See Demo