Функция вызова при каждом столкновении с другими элементами

Question

var bx1 = $(".bx1"); 
var bx2 = $(".bx2"); 

setInterval(function(){ 
    if (collision(bx1,bx2)==true) (bx1).css("background","red"); 
    else (bx1).css("background","blue"); 
},0); 

bx1 фиксирован. Прокручивая страницу, bx1 должен изменить цвет КАЖДЫЙ раз, когда он перемещается по bx2.

JSFiddle

попытался Также это:

var bx1 = $(".bx1"); 
var bx2 = $(document.querySelectorAll(".bx2")); 

Как я могу выполнить эту функцию на каждом элементе определенного класса?

Answer 1

поскольку у вас есть 3 DIV с тем же именем класса, так что вам нужно сделать цикл в вашем столкновении для каждого класса bx2

Я обновил вы скрипку, пожалуйста, посмотрите в

<http://jsfiddle.net/c7Lq1ns9/4/> 

надеюсь, что это решит вашу проблему

, пожалуйста, отметьте это как ответ, если это вам поможет

спасибо

Answer 2

Я думаю, потому что вы хотите проверить столкновение на каждые .bx2, вам нужно пройти и проверить столкновение.

var bx1 = $(".bx1"); 
var bx2 = $(".bx2"); 

setInterval(function() { 
    if (collision(bx1, bx2) == true)(bx1).css("background", "red"); 
    else(bx1).css("background", "blue"); 
}, 0); 


function collision($div1, $divs) { 
    for (i = 0; i < $divs.size(); i++) { 
     if (isColliding($div1, $divs.eq(i))) { 
      return true 
     } 
    } 
    return false; 
}; 

function isColliding($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 && r1 > x2 && y1 < b2 && x1 < r2) return true; 
    else return false; 
} 

Updated Fiddle