点击更改下一个TD表

Question

我想制作一张表格，当我们单击一个框时，它将取消下一列的时钟。

我用两个tds进行了这项工作，并且可以工作，但是当我复制它时却无法工作。

我的想法是，如果我有一个具有类的TD（可以被绑定），则Java脚本将允许我们单击此处并更改下一个tds或下一个列类，使其像以前一样被单击，并将该类更改为不可点击的，因此我们不会再次单击。

我的2个tds的代码是这样的：

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

JS：

$('.can-select1').click(function(e){
    $(this).addClass("is-selected");
    $(this).find('.can-select').addClass("is-selected");
    $(this).children('.can-select-text').addClass("is-selected");
    var nextTd;
    nextTd=$(this).parent().find('.nothing1');
    nextTd.find('.nothing').addClass("can-select1");
    nextTd.addClass("can-select1");
    nextTd.removeClass('nothing1')
});

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

2天的JSFIDDLE： http ： //jsfiddle.net/p3Q7Z/5/

表格的JSFiddle： http ： //jsfiddle.net/p3Q7Z/6/

Answer 1

您可以使用.next()选择下一个TD： http : //api.jquery.com/next/

Answer 2

我不在乎您的第一个代码（有效），而在您的第二个代码（无效）中。

我必须换线。

nextTd=$(this).parent().find('.nothing1');

至

nextTd=$(this).parent().next().find('.nothing1');

只是它。

也就是说， parent()到达第一个“ td”； next()到达第二个，您可以在其中找到具有指定类的元素。