0

我写了这个问题的答案：Fetch content of next td on checkbox click，答案被接受（在写这个问题时）。

目的是在包含输入复选框的当前单元格之后找到表格单元格的文本值；对于第二行，这是可行的（在 Chrome 18/WinXP 中），但在第一行中，评估的console.log(that.checked);评估结果为 false（据我所知，不管它是否被检查）。

提供的 HTML：

<table>
    <tr>
        <td>
            <input type=checkbox name=t>
        </td>
        <td width=25%>
            FOOBAR
        </td>
        <td width=73%>
            BAZ
        </td>
    </tr>
    <tr>
        <td>
            <input type=checkbox name=t>
        </td>
        <td width=25%>
            FOO
        </td>
        <td width=73%>
            BAR
        </td>
    </tr>
</table>

还有我的 JavaScript：

var c = [];

c = window.document.getElementsByTagName('input');

for (var i = 0; i < c.length; i++) {
    var that = c[i];
    if (that.type == 'checkbox') {
        that.onchange = function() {
            console.log(that.checked);
            if (that.checked){
                console.log(that.parentNode.nextElementSibling.firstChild.nodeValue.trim());
            }
        };
    }
}​

JS 小提琴演示。

请注意，它似乎对第二行（并记录FOO到控制台）可靠地工作，但在第一行中，控制台仅记录false. 我犯了一个明显的错误吗？

4

2 回答 2

2

您实际上遇到了与checked. 您的that变量超出了事件处理程序的范围，因此它始终解析为c[1]. 您需要将事物包装在闭包中（也function () { ... }(); 就是更改that为this事件处理程序内部，如下所示：http: //jsfiddle.net/z88HH/3/

for (var i = 0; i < c.length; i++) {
    var that = c[i];
    if (that.type == 'checkbox') {
        that.onchange = function() {
            console.log(this.checked);
            if (this.checked){
                console.log(this.parentNode.nextElementSibling.firstChild.nodeValue.trim());
            }
        };
    }
}​
于 2012-04-26T20:37:18.917 回答
2

并不that总是最后一行，例如 try console.log(that, that.checked)，将其包装在闭包中，请参阅您编辑的jsFiddle

for (var i = 0; i < c.length; i++) {

    if (c[i].type == 'checkbox') {
        c[i].onchange = function(){ 
            var that = c[i];                    
            return function() {
            console.log(that, that.checked);
            if (that.checked){
                console.log(that.parentNode.nextElementSibling.firstChild.nodeValue.trim());
            }
    }}();
    }
}​
于 2012-04-26T20:39:32.710 回答