1

我希望当我单击其中一个圆圈时，它会显示下一行圆圈。但只能有上用is-selected 类。这是我的代码：

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

4

1 回答 1

1

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

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

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

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

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

这从按钮遍历到 parent td，到下一个兄弟td，查找它的.nothing1按钮，并使其可点击。

另外，我将click处理程序行更改为：

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

因此，处理程序将在添加和删除类时应用。正如您所拥有的，处理程序将仅适用于第一次加载页面时存在的元素。

编辑

要修改列中的所有 next 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;
}
于 2013-06-29T18:14:57.297 回答