javascript - 如何检查单击的 div 的至少一侧(左侧或右侧)是否没有其他 div

Question

我有一些 100x100px 的 div:

这3个 block 的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 类添加到我单击的 block (div)中，并且至少有一侧(左侧或右侧)空闲。这样就不会附加其他 block 。在屏幕截图的情况下，绿色 block 的一侧是透明的，因此单击时应该能够获取 te ss 类。红色的没有空闲边，所以当我点击它时不应该添加类。

我在互联网上搜索了解决方案，并阅读了一些有关 offset 和 typeof 的内容，并认为我可以使用它。简而言之:点击一个 block ，获取它的 style left 和 top 并检查周围是否有任何具有相同 style left -100 的 div (左侧)和 +100 右侧，其中 top = 0。如果有则返回true。如果一侧为 true 或两侧都返回 false(在这种情况下，左侧和右侧都没有 block )，则该 block 是“空闲”的，并且需要在单击的 block 上添加 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>

这里的绿色和蓝色 block 是“免费的”。因此，在这种情况下，我们需要调整代码以检查 left-100 和 top-50、left-100 和 top+50、left+100和top-50、left+100和top+50。所以总共 6 次检查(左边 3 次，右边 3 次)

因此，结论是:如果(单击时)一侧空闲(或两侧)，则添加 ss 类。我希望我的问题很清楚并且有人可以提供帮助。

亲切的问候

Answer 1

无意冒犯，但我认为你的方法与工作相差甚远。您正在将表示单个元素的 jQuery 对象视为多维数组，以某种方式神奇地通过各种偏移量进行索引，然后应用 typeof 希望生成 bool 值？现在已经很晚了，所以如果我读错了，请道歉......

编辑:我在 http://jsfiddle.net/AcmLR/1/ 创建了一个 fiddle ，我修正了一些错误，看起来效果很好。下面的代码也已更新。

也许尝试这样的事情:

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

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