Question

我想创建一个表格，当我们点击一个方框时，它会取消第一列的下一个。

我使用两个tds完成了这项工作并且它有效，但是当我复制它时它不起作用。

我的想法在哪里，如果我有一个有一个类的TD（可以被cliqued），那么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;
}

JSFIDDLE for 2 td：http://jsfiddle.net/p3Q7Z/5/

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

Answer 1

您可以使用.next()：http://api.jquery.com/next/

选择下一个道明

Answer 2

我不会看你的第一个代码（工作），只是你的第二个代码（不工作）。

我必须改变这条线。

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

到

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

就是这样。

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

点击更改下一个TD表

2 个答案: