La funzione JavaScript ha effetto solo sul primo div con classe

Question

Ho una parte di un gioco in cui il cursore dovrebbe "rallentare" quando passa sopra alcuni div. Sto usando una funzione in grado di rilevare una collisione con il div. Funziona bene quando il cursore incontra il primo div, ma non funziona affatto sul secondo div.

Check out this jsFiddle per una migliore idea di cosa sto parlando. Passa il cursore sul primo blocco bianco (class='thing') a sinistra e rallenta. Passa il cursore sull'altro blocco (anche class='thing') e non accade nulla. Ho bisogno di questa funzione di collisione per lavorare su tutte le div in cui class='thing'.

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 è un insieme di elementi, come si vuole, ma il problema qui è che si chiede attributi specifici da $thing come offset().left;, che non può restituire più di un numero, quindi basta prendere il primo. Quello che dovresti fare invece è usare una funzione .each() per eseguire il loop su tutti gli elementi in $thing.

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

Answer 2

Quando si selezionano elemento dal nome della classe (nel tuo caso utilizzando .thing) in jQuery si otterrà una serie di elementi e collision() funzione prenderà primo elemento di un array. in modo per superare questo è necessario selezionare in modo univoco sia gli elementi di questo può essere fatto utilizzando id come selettore, è possibile modificare il codice come qui di seguito a lavorare come previsto

<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); 
})(); 

})();