Javascript 检查多个div问题的覆盖

我想检查一些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');
  }
});

函数冲突（$div1，$div2）{
var x1=$div1.offset（）.left；
变量y1=$div1.offset（）.top；
var h1=$div1.outerHeight（true）；
var w1=$div1.外径（真）；
var b1=y1+h1；
var r1=x1+w1；
var x2=$div2.offset（）.left；
变量y2=$div2.offset（）.top；
var h2=$div2.outerHeight（真）；
var w2=$div2.外径（真）；
var b2=y2+h2；
var r2=x2+w2；
如果（b1b2 | | r1r2）
返回false；
返回true；
}
$（“#flex[data item id]”）。每个（function（）{
var id_item=$（this）.data（'item-id'）；
var状态=冲突（$（'c+id_项），$（'r+id_项））；
如果（状态）{
$（'.here'）.css（'background-color'，'red'）；
}
});

---

我不知道为什么，但在控制台中，将ok设置为true和false…精确到它需要的位置，但是

if（status）

不会很好地工作。

就像@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');
  }
});

函数冲突（$div1，$div2）{
var x1=$div1.offset（）.left；
变量y1=$div1.offset（）.top；
var h1=$div1.outerHeight（true）；
var w1=$div1.外径（真）；
var b1=y1+h1；
var r1=x1+w1；
var x2=$div2.offset（）.left；
变量y2=$div2.offset（）.top；
var h2=$div2.outerHeight（真）；
var w2=$div2.外径（真）；
var b2=y2+h2；
var r2=x2+w2；
如果（b1b2 | | r1r2）
返回false；
返回true；
}
$.each（#flex[data item id]”，function（）{
var id_item=$（this）.data（'item-id'）；
var状态=冲突（$（'c'+id_项），$（'r'+id_项））；
如果（状态）{
$（'.here'）.css（'background-color'，'red'）；
}
});

---

编辑：我将jQuery的每个函数都调整为。在您添加html代码之前，我无法测试它是否工作。

就像@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');
  }
});

函数冲突（$div1，$div2）{
var x1=$div1.offset（）.left；
变量y1=$div1.offset（）.top；
var h1=$div1.outerHeight（true）；
var w1=$div1.外径（真）；
var b1=y1+h1；
var r1=x1+w1；
var x2=$div2.offset（）.left；
变量y2=$div2.offset（）.top；
var h2=$div2.outerHeight（真）；
var w2=$div2.外径（真）；
var b2=y2+h2；
var r2=x2+w2；
如果（b1b2 | | r1r2）
返回false；
返回true；
}
$.each（#flex[data item id]”，function（）{
var id_item=$（this）.data（'item-id'）；
var状态=冲突（$（'c'+id_项），$（'r'+id_项））；
如果（状态）{
$（'.here'）.css（'background-color'，'red'）；
}
});

---

编辑：我将jQuery的每个函数都调整为。在添加html代码之前，我无法测试它是否正常工作。

碰撞功能的有效修订版，它除了检查水平重叠外，还检查顶部和底部的垂直重叠，以确认实际重叠

函数冲突（$div1，$div2）{
var x1=$div1.offset（）.left，
y1=$div1.offset（）.top，
b1=$div1.outerHeight（真）+y1，
r1=$div1.外径（真）+x1；
var x2=$div2.offset（）.left，
y2=$div2.offset（）.top，
b2=$div2.outerHeight（真）+y2，
r2=$div2.外径（真）+x2；
var v=假，
h=假，
碰撞=错误；
如果（b1>y2&&b1y1和b2x2&&r1x1&&r2

#alpha{
位置：绝对位置；
左：3em；
顶部：2米；
宽度：4em；
高度：4em；
背景：#489；
}
#贝塔{
位置：绝对位置；
左：4em；
顶部：4em；
宽度：4em；
高度：4em；
背景：#498；
}
#监视器{
位置：固定；
底部：1米；
左：1米；
}

---

碰撞功能的有效修订版，它检查顶部和底部的垂直重叠以及水平重叠，以确认实际重叠

函数冲突（$div1，$div2）{
var x1=$div1.offset（）.left，
y1=$div1.offset（）.top，
b1=$div1.outerHeight（真）+y1，
r1=$div1.外径（真）+x1；
var x2=$div2.offset（）.left，
y2=$div2.offset（）.top，
b2=$div2.outerHeight（真）+y2，
r2=$div2.外径（真）+x2；
var v=假，
h=假，
碰撞=错误；
如果（b1>y2&&b1y1和b2x2&&r1x1&&r2

#alpha{
位置：绝对位置；
左：3em；
顶部：2米；
宽度：4em；
高度：4em；
背景：#489；
}
#贝塔{
位置：绝对位置；
左：4em；
顶部：4em；
宽度：4em；
高度：4em；
背景：#498；
}
#监视器{
位置：固定；
底部：1米；
左：1米；
}

您可以从问题中的语法突出显示中看到您的选择中遗漏了一个

，

或者您可以从问题中的语法突出显示中看到您的选择中遗漏了一个

，

或者您的选择中遗漏了一个