在div點擊顯示所有div的X ID

Question

我希望當我點擊其中一個圓圈它顯示下一行的圓圈。但只能用上選課。這是我的代碼：

<table> 
<tr>   
<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" id="tier1"> 
          <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> 
    </tr> 
    <tr>   
<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" id="tier1"> 
          <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> 
    </tr> 
    </table> 

的Javascript：

$('.can-select1').click(function(e){ 
    $(this).addClass("is-selected"); 
    $(this).find('.can-select').addClass("is-selected"); 
    $(this).children('.can-select-text').addClass("is-selected"); 
}); 

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

JS提琴：http://jsfiddle.net/p3Q7Z/7/

Answer 1

很難告訴你真正想要的，但這應該有幫助：

http://jsfiddle.net/p3Q7Z/8/

首先，id s必須是唯一的。我刪除了它們。

接下來，我添加了一行：

$(this).closest('td').next('td').find('.nothing1').removeClass('nothing1').addClass('can-select1'); 

這遍歷從按鈕，到父td，到下一個兄弟td，查找其.nothing1按鈕，並使其點擊。

而且，我改變了click處理程序行：

$('table').on('click','.can-select1',function(e){ 

所以，當類，並移除處理程序將適用。正如你所做的那樣，處理器只適用於第一次加載頁面時存在的元素。

---

編輯

要修改所有未來td列：

$(this).closest('td').nextAll('td').each(function() { 
    $(this).find('.nothing1').removeClass('nothing1').addClass('can-select1'); 
}); 

---

編輯交談了之後，這裏有一個重新寫

http://jsfiddle.net/p3Q7Z/12

使用單選按鈕和標籤：

<td class="column-0 selectable"> 
    <input type="radio" name="column-0" id="column-0-row-0"> 
    <label for="column-0-row-0"> 
     <img src="http://lkimg.zamimg.com/images/guides/ability-marker.png"> 
     <div>1</div> 
    </label> 
</td> 

不要在所有的CSS樣式沒有名稱：

td input[type="radio"] { 
    display: none; 
} 
td input[type="radio"] + label { 
    display:none; 
    cursor:default; 
    opacity:0; 
    position: relative; 
} 
td input[type="radio"] + label img { 
    vertical-align: middle; 
} 
td input[type="radio"] + label div { 
    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; 
} 

td.selectable input[type="radio"] + label { 
    display:block; 
    cursor:pointer; 
    opacity:0.4; 
} 
td.selectable input[type="radio"]:checked + label { 
    cursor:pointer; 
    opacity:1.0; 
}