在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()或/和另一個。
• 它仍然不處理副箱。