每次与其他元素发生碰撞时调用函数

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"));

如何对特定 class 的每个元素执行此功能？

Answer 1

我想因为你想检查每个 .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

Answer 2

因为你有 3 个 div 具有相同的 class 名称，所以你需要在碰撞中为每个 bx2 class

做 for 循环

我给你更新了fiddle请看

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

希望这能解决您的问题

如果对您有帮助，请标记为答案

感谢

每次与其他元素发生碰撞时调用函数

Call function on every collision with other elements

javascript

collision

getelementsbyclassname