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

我不知道为什么但是在控制台中确定了真假......确切地说它需要但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');
  }
});

编辑：我将jQuery的每个函数调整为jQuery each documentation。我无法测试它是否有效，直到你添加你的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>

检查多个div问题的叠加层

2 个答案: