在格单击显示与X ID的所有div [关闭](on div click show all divs

我想，当我点击圆圈一个它显示界的下一行。但只能对与被选择的类。这是我的代码：

<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/

很难告诉你真正想要的，但这应该有所帮助：

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