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()函数（使用{{ 1}}选择器来获取循环中的当前元素

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

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

两个div之间的jquery冲突不起作用

1 个答案:

See Demo