如何检查单击的div（左侧或右侧）的至少一侧是否没有其他div

Question

我有一些 100x100px 的 div：

三个区块的HTML代码：

<div id="plane">
   <div class="tile tile3" block-id="1" style-id="3" style="left:50px; top:50px"></div>
   <div class="tile tile1" block-id="2" style-id="1" style="left:150px; top:50px"></div>
   <div class="tile tile3" block-id="3" style-id="3" style="left:250px; top:50px"></div>
</div>

当我单击一个 div 时，我添加了一个名为 ss 的类，它使单击的 div/block 变为黄色。我使用以下代码进行此操作：

 el.innerHTML = html.join('');
       $(el).find('.tile').click(function () {
       var clickedBlock = $(this); 
       clickedBlock.addClass('ss'); 
 });

问题是我只想将ss 类添加到我单击的块（div）中，并且至少有一侧（左侧或右侧）空闲。这样就不会附加其他块。在截图的情况下，绿色块的一侧是清晰的，所以点击这些应该可以得到ss类。红色的没有免费的一面，所以我点击它时不应该添加任何类。

我在互联网上搜索了解决方案并阅读了一些关于 offset 和 typeof 的内容，并认为我可以使用它。简而言之：单击一个块，获取它的 style left 和 top 并检查周围是否有任何 div 具有相同的 style left -100（左侧）和 +100 右侧的 top = 0。如果有，返回真。如果一侧为真或双方返回假（在这种情况下左右没有块），则该块是“空闲”的，需要在点击的块上添加ss类。

我试过这段代码（没有成功）：

el.innerHTML = html.join('');
    $(el).find('.tile').click(function () {
        var clickedBlock = $(this); 
        var offset = $(this).offset(); //get the top and left px

        if (typeof clickedBlock[offset.left-100][offset.top=clickedBlock.attr('top')] == 'true') { //check the left side
            if (typeof clickedBlock[offset.left+100][offset.top=clickedBlock.attr('top')] == 'false') { //check the right side
                clickedBlock.addClass('ss'); 
            }
        } else { //if left side is already false, it really doesn't matter if the right side is clear or not since 1 side needs to be clear
                clickedBlock.addClass('ss'); 
        }
});

我的问题：如何使这项工作？这是做到这一点的最佳方法，还是有更好的方法？如果有，是哪些？

以下选项也是可能的：

这个的HTML代码是：

<div id="plane">
  <div class="tile tile3" block-id="1" style-id="3" style="left:50px; top:50px"></div>
  <div class="tile tile1" block-id="2" style-id="1" style="left:150px; top:100px"></div>
  <div class="tile tile2" block-id="3" style-id="2" style="left:50px; top:150px"></div>
  <div class="tile tile3" block-id="4" style-id="3" style="left:250px; top:150px"></div>
</div>

这里的绿色和蓝色块是“免费的”。所以在这种情况下，我们需要修改代码以检查具有left-100 和top-50、left-100 和top+50、left+100 和top-50、left+100 和top+50 的div。所以总共 6 次检查（左侧 3 次，右侧 3 次）

总之：如果（点击时）一侧是空闲的（或两者都空闲），则添加 ss 类。我希望我的问题很清楚，有人可以提供帮助。

亲切的问候

Answer 1

没有冒犯，但我认为你的方法离工作还有光年。您正在将一个表示单个元素的 jQuery 对象视为一个多维数组，以某种方式神奇地由各种偏移量索引，然后应用 typeof 以希望产生一个布尔值？这里已经很晚了，如果我读错了，请道歉......

编辑：我在http://jsfiddle.net/AcmLR/1/ 创建了一个小提琴，在那里我修复了一些错误并且似乎运行良好。下面的代码也更新了。

不妨试试这样的：

var tiles = $('.tile');
tiles.click(function(){
  var me = $(this); //To save a few lookups
  /*Read out the top and left attributes, remove 'px' to 
  get the numeric part and force them to be numbers using the + (not really needed)*/
  var myLeft = +me.css('left').replace('px', '');
  var myTop = +me.css('top').replace('px', '');
  var leftFree = true, rightFree = true; //Assume both sides are free to begin with
  tiles.not(me).each(function(){
    if(!leftFree && !rightFree){
      return; //No need processing any more boxes
    }
    var me = $(this); //To save a few lookups
    var left = +me.css('left').replace('px', '');
    var top = +me.css('top').replace('px', '');
    if(top < myTop-100 || top > myTop+100){
      return; //This box is completely above or below the clicked box
    }
    if(left == myLeft-100){
      leftFree = false;
      return;
    }
    if(left == myLeft+100){
      rightFree = false;
      return;
    }
  });
  if(leftFree || rightFree){
    me.addClass('ss'); //In this scope me still refers to the clicked box
  }
});

根据您的具体要求，盒子是否可以移动等，可能会有更高效或更紧凑的解决方案。

Answer 2

在您的示例中，您似乎可以说：

$('.tile').on({
    click : function () {
        if($(this).css('left') != '150px') {
            $(this).addClass('ss');
        }
    }
});

因为只有中间的 div 才会有那个特定的声明，所以你总是知道点击的是外部 div。

如果您的代码通常如此具体，则此方法有效。如果它更具动态性和流动性（例如一组 div 向左浮动），您可以执行与您在上面发布的内容类似的操作：

$('.tile').on({
    click : function () {
        var prevEleOffSet = $(this).prev('.tile').offset().left,
            nextEleOffSet = $(this).next('.tile').offset().left,
            thisEleOffSet = $(this).offset().left;

        if(prevEleOffSet > thisEleOffSet || nextEleOffSet < thisEleOffSet) {
            $(this).addClass('ss');
        }
    }
});

首先，我们检查我们点击的 $('.tile') 的 prev('.tile') 是否在屏幕的左侧。如果是，我们可以假设它在上面的行中。如果结果是 prev('.tile') 在同一行，我们检查下一个('.tile')。如果它没有我们点击的 $('.tile') 左边那么远，我们可以假设它在下一行，而不是我们点击的 div 旁边。

如果这些陈述中的任何一个是真的，我们就打你的班，把它变成黄色，然后继续我们的业务。

希望对你有帮助。

Answer 3

我会尝试一下，但这可能不适用于所有情况

1st - 我将遍历该框内的所有 div 并收集“左”css 值（Jquery 偏移量或 css）并将它们存储到一个数组中。但我不会全部收集，我只是取一个独特的价值。所以 5 div 左边是 (50,50,150,200,200)。我只会收集（50,150,200）。 （这可以通过 while 循环轻松完成）。

2nd - 检查数组长度是否 > 2。如果

3rd - 如果 >2，则只有第一个和最后一个值是可以变黄的框的值

同样，当您有单行时，这将是理想的工作，如果您有超过 1 行，则必须检查它们彼此的对齐方式...

这是我最好的镜头@_o