在TD元素上碰撞时颜色2单元格宽度和3单元格高度

Question

我正在寻找一种制作网格的方法（现在使用表格，但很快就在div中）。 让我们先点击第一个单元格（x，y = 1，-1）我想要2个单元格宽度和3个单元格高度的背景颜色改变。 （共6个单元格更改）...

如果使用div更容易，请继续...使用jQuery请！ :)

我真的不知道如何做到这一点，如果有人可以把我的道路上，或给我一个代码应该这样做...或更好，教程XD ...

我真的很感谢你的帮助，100次感谢

编辑：

我想要真正做的，是一种无形的grod使系统相媲美的RTS类游戏，所在的建筑是透明的，并按照鼠标，但它移动时连接到网格上，并且在clikc上，建筑物会被放弃（不透明）......解释这一点只是为了让您在这里可以看到一些视觉效果。

Answer 1

以下是DIV（因为它是长期目标）：

首先，我做了一个小标记，这将是像一个排序表的。

的HTML是：

<div id="overall"> 
    <div class="row"> 
     <div class="cell col0"></div><div class="cell col1"></div><div class="cell col2"></div><div class="cell col3"></div> 
    </div> 
    <div class="row"> 
     <div class="cell col0"></div><div class="cell col1"></div><div class="cell col2"></div><div class="cell col3"></div> 
    </div> 
    <div class="row"> 
     <div class="cell col0"></div><div class="cell col1"></div><div class="cell col2"></div><div class="cell col3"></div>  
    </div> 
    <div class="row"> 
     <div class="cell col0"></div><div class="cell col1"></div><div class="cell col2"></div><div class="cell col3"></div>  
    </div> 
</div> 

用下面的CSS：

.row{ 
    height:25px; 
} 
.cell{ 
    width:25px; 
    height:100%; 
    display:inline-block; 
    border:1px solid black; 
} 

所以它有一个像显示表（这是一个细胞组成的一串排，细胞在同一列的份额一类）。

要做你想做的事，看起来你需要将点击功能与每个.cell相关联。

要做到这一点很容易，使用$(".cell").click(function(){});

现在，它的时间才能完成的功能。

现在下一步是为需要着色的单元格着色。要添加着色我们将使用一类特殊的（这样我们可以改变的东西更容易）：

.clickedCell{ 
    background:red; 
} 

最难的是选择6个细胞。可以使用许多方法（例如，我们可以使用像A1，A2，B1，B2这样的id网格，并使用id选择它们），效率/设计在很大程度上取决于您对div的标记。

我做这件事的方法如下：

• 检索类我的单元格的列的：

  var cl=$(this).attr("class"); 
  var col="."+/col\d/.exec(cl)[0]; 
  

• 检索当前div的父var parent=$(this).parent();

• 制作一个jQuery对象，包含当前colomn中的3个单元格：

  listOfCell=$(this); 
  listOfCell=listOfCell.add(parent.next().children(col)); 
  listOfCell=listOfCell.add(parent.prev().children(col)); 
  

  请注意，add函数返回一个新的集合，因此我们需要指定返回值。

• 添加3个一个细胞到该对象listOfCell=listOfCell.add(listOfCell.next());

• 添加类listOfCell.addClass("clickedCell");

而且它已经结束了:)

工作示例这里：http://jsfiddle.net/KZFzd/1/

需要注意的是：

• 如前所述，该功能在很大程度上取决于所使用的标记。
• 该示例不处理先前选定的单元格的删除。这很容易，并作为练习留给读者。
• 它不处理侧边单元格的特殊情况，它只是改变单元格的背景，如果网格更大，它将被更改。这个案件留给读者作为练习。
• 它不检查下一个/上一个父项的存在，因为当没有匹配项时jQuery会返回空的jQuery对象，因此即使它没有任何效果，也可以调用方法。
• 该示例可以通过多种方式进行压缩，但保留为了便于阅读。

希望有帮助。

编辑： 为了回答您的意见，新的小提琴来处理指定的大小：​​

我添加了两个输入，让您指定的大小。您可能需要在代码:)中更改该代码。

我还添加了删除类来清理显示。

所以两个主要的改变是，现在我们使用两个for循环来添加单元格。被点击的单元格是矩形的左上角。

• 第一个：

  for (i=1;i<y;i++){ 
      listOfCell=listOfCell.add(par.children(col)); 
      par=par.next(); 
  } 
  

  这只是从一个父迭代到另一个以达到所需的高度。 （与第一父分配现在是直接下一个par=$(this).parent().next()

• 第二个：

  for (i=1;i<x;i++){ 
      listOfCell=listOfCell.add(listOfCell.next()); 
  } 
  

  这只是迭代添加的下一个元件，以达到期望的宽度

。

请注意：

• 我们使用的事实是，在jQuery中没有double列表中的宽度。
• 我们迭代从1开始，而不是0，因为我们的出发listOfCell已经是一个1 * 1电池
• 您可以轻松地从别人的角落开始，如果你更改了一个循环利用的next()到prev()或/和另一个。
• 它仍然不处理副箱。