单击更改下一个 TD 表答案

【问题标题】：on click change next TD table单击更改下一个 TD 表
【发布时间】：2013-06-29 00:18:44
【问题描述】：

我想制作一个表格，当我们单击一个框时，它会解锁下一列。

我用两个 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;
}

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

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

【问题讨论】：

标签： javascript css html onclick html-table

【解决方案1】：

我不关注你的第一个代码（工作），只关注你的第二个（不工作）。

我必须换行。

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

到

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

就是这样。

即parent()到达第一个'td'； next() 到达第二个，在这里可以找到指定类的元素。

【讨论】：

而且，是的，我不得不说您应该以非常清晰的方式编写代码。 nothing, nothing1, can-select, can-select1, can-select-text... 很乱。您应该能够使用一两个控件类编写此代码。但这不是问题的根源。
谢谢，我会改的：P

【解决方案2】：

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

【讨论】：

我不知道如何选择 TD 而不是其他所有内容。