JavaScript 函数只影响第一个带有类的 div

Question

我有一个游戏的一部分，当光标经过某些 div 时，它应该“减速”。我正在使用一个可以检测与 div 冲突的函数。这在光标遇到第一个 div 时可以正常工作，但在第二个 div 上根本不起作用。

Check out this jsFiddle 以便更好地了解我在说什么。将光标移到左侧的第一个白色块 (class='thing') 上，它就会减速。将光标移到另一个块上（也是class='thing'），什么也没有发生。我需要这个碰撞函数来处理class='thing' 的所有div。

HTML

<div id='cursor'>
            &nbsp;
        </div>
        <div class='thing' style='width:70px; height:70px; background: #fff; position: absolute; bottom: 350px; right: 800px; z-index: -1;'>
            &nbsp;
        </div>
        <div class='thing' style='width:70px; height:70px; background: #fff; position: absolute; bottom: 200px; right: 400px; z-index: -1;'>
            &nbsp;
        </div>

JS

(function collide(){
var newInt = setInterval(function() {
function collision($cursor, $thing) {
    var x1 = $cursor.offset().left;
    var y1 = $cursor.offset().top;
    var h1 = $cursor.outerHeight(true);
    var w1 = $cursor.outerWidth(true);
    var b1 = y1 + h1;
    var r1 = x1 + w1;
    var x2 = $thing.offset().left;
    var y2 = $thing.offset().top;
    var h2 = $thing.outerHeight(true);
    var w2 = $thing.outerWidth(true);
    var b2 = y2 + h2;
    var r2 = x2 + w2;

    // change 12 to alter damping higher is slower
    var varies = 12;    

    if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2){
    } else {
    varies = 200;
    console.log(varies);
    }
$xp += (($mouseX - $xp)/varies);
    $yp += (($mouseY - $yp)/varies);
    $("#cursor").css({left:$xp +'px', top:$yp +'px'}); 

}

$(collision($('#cursor'), $('.thing')));
//$('.result').text(collision($('#cursor'), $('.thing')));

}, 20);
})();

Answer 1

$thing 是元素的集合，如你所愿，但这里的问题是你向$thing 询问特定属性，如offset().left;，它不能返回多个数字，因此它只取第一个.您应该做的是使用.each() 函数循环遍历$thing 中的所有元素。

$thing.each( function( index, element ){
    //your code for each thing here
});

Answer 2

当您在 jQuery 中按类名选择元素时（在您的情况下使用 .thing），您将获得一个元素数组，collision() 函数将获取数组中的第一个元素。所以要克服这个问题，您需要唯一地选择两个元素，这可以使用 id 作为选择器来完成，您可以像下面这样更改代码以按预期工作

<div id='track'>
    <div class = 'container'>
        <div id='cursor' class='cursor'>
            &nbsp;
        </div>
        <div class='thing' id="a1" style='width:70px; height:70px; background: #fff; position: absolute; bottom: 175px; right: 400px; z-index: -1;'>
            &nbsp;
        </div>
        <div class='thing' id="a2"  style='width:70px; height:70px; background: #fff; position: absolute; bottom: 100px; right: 200px; z-index: -1;'>
            &nbsp;
        </div>
    </div>
</div>


(function cursorMapping(){

var $mouseX = 0, $mouseY = 0;
var $xp = 0, $yp =0;

$(document).mousemove(function(e){
    $mouseX = e.pageX;
    $mouseY = e.pageY;    
});

function showCoords(event) {
    var x = event.clientX;
    var y = event.clientY;
    var coor = "X: " + x + ", Y: " + y;
}

var timestamp = null;
var lastMouseX = null;
var lastMouseY = null;

var mrefreshinterval = 500; // update display every 500ms
 var lastmousex=-1; 
 var lastmousey=-1;
 var lastmousetime;
 var mousetravel = 0;
 var lastmousetravel = 0;

var speed;
var marker1 = 1;
var marker2 = 1;

var timer = setInterval(function(){
    marker1;
    marker2;
}, 20);

$(function() {

    var $speedometer = $('#speed'),
         _speed = 0; 

    $('#track').cursometer({
        onUpdateSpeed: function thisSpeed(speed) {
            _speed = speed;
            $speedometer.text(Math.ceil(speed * 100)/100);
        },
        updateSpeedRate: 20
    });

});

var thisInterval = setInterval(function FXInterval(){
    speed = $('#speed').text();
        $('#cursor').css({'background-color': '#CE7A7A'});
}, 20);

 $('html').mousemove(function(e) {
     var mousex = e.pageX;
     var mousey = e.pageY;
     if (lastmousex > -1)
         mousetravel += Math.max( Math.abs(mousex-lastmousex), Math.abs(mousey-lastmousey) );
     lastmousex = mousex;
     lastmousey = mousey;
     var speed = lastmousex + lastmousey;

    setTimeout(function(){
        lastmousetravel = mousetravel;
    }, 20);
 });

(function collide(){
var newInt = setInterval(function() {
function collision($cursor, $thing) {
    var x1 = $cursor.offset().left;
    var y1 = $cursor.offset().top;
    var h1 = $cursor.outerHeight(true);
    var w1 = $cursor.outerWidth(true);
    var b1 = y1 + h1;
    var r1 = x1 + w1;
    var x2 = $thing.offset().left;
    var y2 = $thing.offset().top;
    var h2 = $thing.outerHeight(true);
    var w2 = $thing.outerWidth(true);
    var b2 = y2 + h2;
    var r2 = x2 + w2;

    // change 12 to alter damping higher is slower
    var varies = 12;    

    if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2){
    } else {
    varies = 200;
    console.log(varies);
    }
$xp += (($mouseX - $xp)/varies);
    $yp += (($mouseY - $yp)/varies);
    $("#cursor").css({left:$xp +'px', top:$yp +'px'}); 
}
$(collision($('#cursor'), $('#a1')));
$(collision($('#cursor'), $('#a2')));

}, 20);
})();

})();