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

Question

我有一些100x100px的div：

3块的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 /块变黄。 我使用以下代码：

 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相同的style left -100 （左侧），右侧为+100 ， top = 0 。 如果有，返回true。 如果一方为真或双方都返回false（在这种情况下，左侧和右侧没有块），则该块是“空闲的”，并且需要在单击的块上添加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>

这里的绿色和蓝色块是“免费的”。 因此，在这种情况下，我们需要调整代码以检查div为left-100和top-50 ， left-100和top+50 ， left+100和top-50 ， left+100和top+50 。 总共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并收集“left”css值（Jquery偏移量或css）并将它们存储到数组中。 但我不收集所有这些，我只是采取一个独特的价值。 所以左边有5个div（50,50,150,200,200）。 我只收集（50,150,200）。 （这可以通过while循环轻松完成）。

2 - 检查阵列长度是否> 2。 如果<= 2，则每个盒子都会变黄。

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

同样，当你有一行时，这将理想地工作，如果你有一行，你必须检查他们彼此的对齐...

那是我最好的拍摄@_o