0

我有一些 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/block 变为黄色。我有这个使用以下代码：

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

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

我在互联网上搜索了一个解决方案并阅读了一些关于offset并且typeof认为我可以使用它的东西。简而言之：单击一个块，获取它style left并top检查周围是否有任何 div 相同style left -100（左侧）和+100右侧 where 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>

这里的绿色和蓝色块是“免费的”。因此，在这种情况下，我们需要调整代码以检查 div 与left-100and top-50, left-100and top+50, left+100and top-50, left+100and top+50。所以总共有 6 次检查（左边 3 次，右边 3 次）

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

亲切的问候

4

3 回答 3

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

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

于 2013-03-23T01:11:11.873 回答
1

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

$('.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 旁边。

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

我希望这会有所帮助。

于 2013-03-23T02:42:51.433 回答
0

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

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

第二 - 检查数组长度是否> 2。如果 <=2 则每个框都会变黄。

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

同样，理想情况下，这将在您有单行时起作用，如果您有超过 1 行，则必须检查它们彼此的对齐方式...

那是我最好的镜头@_o

于 2013-03-23T01:02:34.030 回答