1

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

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

4

2 回答 2

0

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

我必须换行。

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

至

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

只是它。

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

于 2013-06-28T16:18:44.780 回答
0

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

于 2013-06-28T15:21:05.853 回答