javascript - 在 div 上单击显示所有带有 X id 的 div

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 fiddle :http://jsfiddle.net/p3Q7Z/7/

Answer 1

很难说出您真正想要什么，但这应该会有所帮助:

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

首先，id必须是唯一的。我删除了它们。

接下来，我添加了以下行:

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