单独检测共享同一类的元素

Individually Detecting elements that share the same class

本文关键字：一类 元素 检测 共享 单独      更新时间：2023-09-26

我有三个div（.block）。每个div都应该变成红色，这取决于另一个div（.square）是否位于其顶部。到目前为止，只有一个".square"被识别（标记中列出的第一个），并且它正在将所有".block"变成红色，而不仅仅是它顶部的那个。此外，任何关于让它更干燥的提示都将不胜感激。

这是我的代码-

var squareWidth = $('.square').width();
var squareHeight = $('.square').height();
var squareLeft = $('.square').offset().left;
var squareTop = $('.square').offset().top;
var squareRight = squareLeft + squareWidth;
var squareBottom = squareTop + squareHeight;
$('.block').each(function() {
var blockWidth = $(this).width();
var blockHeight = $(this).height();
var blockLeft = $(this).offset().left;
var blockTop = $(this).offset().top;
var blockRight = blockLeft + blockWidth;
var blockBottom = blockTop + blockHeight;
if(squareLeft > blockLeft && squareRight < blockRight && squareTop > blockTop 
    && squareBottom < blockBottom) {
    $('.block').css('background', 'red');
}
});

这是我的小提琴：http://jsfiddle.net//QmE98/

使用this引用正在检查的.block的特定实例：

if(squareLeft > blockLeft && squareRight < blockRight && squareTop > blockTop 
    && squareBottom < blockBottom) {
    $(this).css('background', 'red');
}

要进一步抽象代码，请使用CSS类切换：

    $(this).addClass('myClass');

更新：由于HTML的结构方式，我们必须通过索引引用元素：

http://jsfiddle.net/isherwood/QmE98/10

$('.block').each(function () {
    // deduct the quantity of .square elements
    var myIndex = $(this).index() - $('.square').size();
    var squareWidth = $('.square').eq(myIndex).width();
    var squareHeight = $('.square').eq(myIndex).height();
    var squareLeft = $('.square').eq(myIndex).offset().left;
    var squareTop = $('.square').eq(myIndex).offset().top;
    ...
    if (squareLeft > blockLeft && squareRight < blockRight && squareTop > blockTop && squareBottom < blockBottom) {
        $(this).css('background', 'red');
    }
});

然而，如果您可以对HTML进行一些温和的重组，这会更好：

http://jsfiddle.net/isherwood/QmE98/5

<div class="container">
    <div class="block"><div style="top: 30px; left: 30px" class="square"></div></div>
    <div class="block"><div style="top: 30px; left: 150px" class="square"></div></div>
    <div class="block"><div style="top: 30px; left: 320px" class="square"></div></div>
</div>

jsFiddle

正在工作。改变了一些事情-

  1. 将方形类div放在它们对应的块div中
  2. 将square函数移到循环中，因为否则它们将静态到最后一个square
  3. 添加了一个仅适用于当前块下的方形类的子函数
  4. 在最后一行添加（this），如图所示

var squareWidth=$（'.square'）.width（）；var squareHeight=$（'.square'）.height（）；

$('.block').each(function() {
    var squareLeft = $(this).children('.square').offset().left;
    var squareTop = $(this).children('.square').offset().top;
    var squareRight = squareLeft + squareWidth;
    var squareBottom = squareTop + squareHeight;
    var blockWidth = $(this).width();
    var blockHeight = $(this).height();
    var blockLeft = $(this).offset().left;
    var blockTop = $(this).offset().top;
    var blockRight = blockLeft + blockWidth;
    var blockBottom = blockTop + blockHeight;
    if(squareLeft > blockLeft && squareRight < blockRight && squareTop > blockTop && squareBottom < blockBottom) {
        $(this).css('background', 'red');
    }
});
相关文章：