點擊更改下一個TD表

Question

我想製作一個表格，當我們點擊一​​個盒子時，它會將下一列的時鐘頻率下一個。

我用兩個tds做了這個工作，它工作，但是當我複製它不起作用。

我的ideias在哪裏，如果我有一個TD有一個類（可以被cliqued），那麼java腳本將允許我們點擊那裏並改變下一個tds甚至下一個類的類，像之前那樣點擊將該類更改爲不可點擊的類，以便我們不再單擊那裏。

我2 TDS代碼是這一個：

  <td> 
       <div style="position: relative;" class="can-select1"> 
        <img src="http://lkimg.zamimg.com/images/guides/ability-marker.png" style="vertical-align: middle;" class="can-select"> 
        <div class="can-select-text">1</div> 
       </div> 
      </td> 
      <td> 
       <div style="position: relative;" class="nothing1"> 
        <img src="http://lkimg.zamimg.com/images/guides/ability-marker.png" style="vertical-align: middle;" class="nothing"> 
        <div class="can-select-text">2</div> 
       </div> 
      </td> 

JS：

$('.can-select1').click(function(e){ 
    $(this).addClass("is-selected"); 
    $(this).find('.can-select').addClass("is-selected"); 
    $(this).children('.can-select-text').addClass("is-selected"); 
    var nextTd; 
    nextTd=$(this).parent().find('.nothing1'); 
    nextTd.find('.nothing').addClass("can-select1"); 
    nextTd.addClass("can-select1"); 
    nextTd.removeClass('nothing1') 
}); 

CSS：

.can-select1 { 
    cursor:pointer; 
    opacity:0.4; 
} 
.can-select-text{ 
    opacity: 0; 
    position: absolute; 
    top: 0; 
    left: 0; 
    text-align: center; 
    width: 32px; 
    font: bold 13px/32px 'Trebuchet Ms'; 
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); color: #111; 
} 
.is-selected { 
    cursor:default; 
    opacity:1.0; 
} 

.nothing1{ 
    cursor:default; 
    opacity:0; 
} 

的jsfiddle 2 TD：http://jsfiddle.net/p3Q7Z/5/

的jsfiddle爲表格：http://jsfiddle.net/p3Q7Z/6/

Answer 1

我不看你的第一個代碼（工作），僅供第二（不工作）。我不得不改變路線。

nextTd=$(this).parent().find('.nothing1'); 

到

nextTd=$(this).parent().next().find('.nothing1'); 

只是它。

即，parent()達到第一'td'; next()達到第二，你可以找到具有指定類的元素。

Answer 2

您可以.next()選擇下一個TD：http://api.jquery.com/next/