多くのdivのオーバーレイを確認する

Question

一部のdivがオーバーレイしているかどうか確認したいと思います。ここで私は

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

$("#flex[data-item-id]").each(function() {  
    var id_item = $(this).data('item-id'); 
    var status = collision($('#c + id_item), $("#r" + id_item)); 

    if (status) { 
    $('.here').css('background-color', 'red'); 
    } 
}); 

を使用している機能である私はなぜ知っているが、コンソールで[OK]を真と偽入れ...正確には、必要がある場合が、if(status)はとてもうまく動作しませんしません。..

Answer 1

@Rory McCrossanが言ったように、あなたのセレクタに 'がありません。

は、このコードを試してみてください。

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

$.each("#flex[data-item-id]" , function() {  
    var id_item = $(this).data('item-id'); 
    var status = collision($('#c' + id_item), $("#r" + id_item)); 

    if (status) { 
    $('.here').css('background-color', 'red'); 
    } 
}); 

EDIT：私はjQuery each documentationにjQueryのに各機能を調節します。あなたがあなたのhtmlコードを追加するまで動作しているかどうかはテストできません。

Answer 2

コリジョン関数の修正版では、実際の重なりを確認するために、水平オーバーラップに加えて、トップとボトムの両方の垂直方向の重なりをチェックします。

function collision($div1, $div2) { 
 
    var x1 = $div1.offset().left, 
 
    y1 = $div1.offset().top, 
 
    b1 = $div1.outerHeight(true) + y1, 
 
    r1 = $div1.outerWidth(true) + x1; 
 

 
    var x2 = $div2.offset().left, 
 
    y2 = $div2.offset().top, 
 
    b2 = $div2.outerHeight(true) + y2, 
 
    r2 = $div2.outerWidth(true) + x2; 
 

 
    var v = false, 
 
    h = false, 
 
    collide = false; 
 

 
    if (b1 > y2 && b1 < b2) { 
 
    v = true; 
 
    } 
 
    if (b2 > y1 && b2 < b1) { 
 
    v = true; 
 
    } 
 
    // vertical overlap check 
 

 
    if (r1 > x2 && r1 < r2) { 
 
    h = true; 
 
    } 
 
    if (r2 > x1 && r2 < r1) { 
 
    h = true; 
 
    } 
 
    // horizontal overlap check 
 

 
    if (h && v) { 
 
    collide = true; 
 
    } 
 

 
    return collide 
 
} 
 
/* 
 
$.each("#flex[data-item-id]" , function() {  
 
    var id_item = $(this).data('item-id'); 
 
    var status = collision($('#c' + id_item), $("#r" + id_item)); 
 

 
    if (status) { 
 
    $('.here').css('background-color', 'red'); 
 
    } 
 
}); */ 
 

 
$("#monitor").text(collision($('#alpha'), $('#beta'))); 
 
// display the result

#alpha { 
 
    position: absolute; 
 
    left: 3em; 
 
    top: 2em; 
 
    width: 4em; 
 
    height: 4em; 
 
    background: #489; 
 
} 
 

 
#beta { 
 
    position: absolute; 
 
    left: 4em; 
 
    top: 4em; 
 
    width: 4em; 
 
    height: 4em; 
 
    background: #498; 
 
} 
 

 
#monitor { 
 
    position: fixed; 
 
    bottom: 1em; 
 
    left: 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="alpha"></div> 
 
<div id="beta"></div> 
 

 
<div id="monitor"></div>