javascript - 具有奇怪行为的文本重叠检测

Question

我正在尝试检测 div.text 何时位于另一个之上(在父级 div#element 内)，父级的背景应该根据重叠的存在。

问题是，当没有重叠时，脚本仍然会检测到重叠，这可能是因为每个 .text 都将它们的位置与自身重新进行比较。

$(".text").each(function() {
  var self_text = $(this),
    self_textid = self_text.attr('id'),
    self_textLeft = self_text.position().left,
    self_textTop = self_text.position().top,
    self_textWidth = self_text.width(),
    self_textHeight = self_text.height();

  $(".text").each(function() {
    var self_shape = $(this),
      self_shapeLeft = self_shape.position().left,
      self_shapeTop = self_shape.position().top,
      self_shapeWidth = self_shape.width(),
      self_shapeHeight = self_shape.height();

    // check if .text overlaps
    if (
      (self_textLeft + self_textWidth) > self_shapeLeft &&
      self_textLeft < (self_shapeLeft + self_shapeWidth) &&
      (self_textTop + self_textHeight) > self_shapeTop &&
      self_textTop < (self_shapeTop + self_shapeHeight)
    ) {
      // overlap
      $('#elements').css('background', 'red');
    } else {
      // no overlap
      $('#elements').css('background', 'green')
    }
  });
});

#elements,
.text {
  position: absolute;
}

.text {
  width: 50px;
  background: blue;
}

#elements {
  height: 250px;
  width: 400px;
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="elements">
  <div class="text" style="left: 20px; top: 20px;">text1</div>
  <div class="text" style="left: 100px; top: 50px;">text2</div>
  <div class="text" style="left: 10px; top: 200px;">text3</div>
  <div class="text" style="left: 10px; top: 45px;">text4</div>
</div>

我如何告诉脚本在不更改 .text 类的情况下再次循环时忽略自身，还有什么方法可以改进代码吗？

Answer 1

这是因为你包含了 div 本身来检查，尝试将它添加到一个 not:

var $textDivs = $(".text"); // cache this so you are not performing the lookup every time in your loop
$textDivs.each(function() {
  var self_text = $(this),
    self_textid = this.id,
    self_textLeft = self_text.position().left,
    self_textTop = self_text.position().top,
    self_textWidth = self_text.width(),
    self_textHeight = self_text.height(),
    hasNotMatched = true;

  $textDivs.not(self_text).each(function() { // added to a not so not checked against itself
    var self_shape = $(this),
      self_shapeLeft = self_shape.position().left,
      self_shapeTop = self_shape.position().top,
      self_shapeWidth = self_shape.width(),
      self_shapeHeight = self_shape.height();

    // check if .text overlaps
    if (
      (self_textLeft + self_textWidth) > self_shapeLeft &&
      self_textLeft < (self_shapeLeft + self_shapeWidth) &&
      (self_textTop + self_textHeight) > self_shapeTop &&
      self_textTop < (self_shapeTop + self_shapeHeight)
    ) {
      // overlap
      $('#elements').css('background', 'red');
      hasNotMatched = false;

      return false; // break out of each loop so as no need to process anymore and so overlap doesn't turn back green
    } else {
      // no overlap
      $('#elements').css('background', 'green')
    }
  });
  
  return hasNotMatched;    // this will break out of outer loop if matched on inner loop
});

#elements,
.text {
  position: absolute;
}

.text {
  width: 50px;
  background: blue;
}

#elements {
  height: 250px;
  width: 400px;
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="elements">
  <div class="text" style="left:20px; top:20px;">text1</div>
  <div class="text" style="left:100px; top:50px;">text2</div>
  <div class="text" style="left:90px; top:40px;">text3</div>
  <div class="text" style="left:190px; top:30px;">text4</div>
</div>