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必须是唯一的。我删除了它们。

接下来，我添加了一行：

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

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

1 个答案: