0

この質問に対する回答を書きました:チェックボックスのクリックで次の td のコンテンツを取得する、回答は受け入れられました (この質問を書いている時点で)。

その意図は、入力チェックボックスを含む現在のセルに続くテーブルセルのテキスト値を見つけることでした。2 行目では (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 フィドルのデモ。

2 行目 (およびコンソールへのログ) では確実に機能するように見えFOOますが、最初の行ではコンソールのログのみが記録されることに注意してくださいfalse。私が犯している明らかな間違いはありますか？

4

2 に答える 2

2

that常に最後の行であるとは限りません。たとえば、 tryconsole.log(that, that.checked)、クロージャーでラップします

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 に答える
2

とは関係のない問題が発生していcheckedます。変数thatはイベント ハンドラーの範囲外にあるため、常にc[1]. ものをクロージャーでラップする必要があります（別名、または次のようにイベントハンドラー内function () { ... }(); に変更thatするだけです： http://jsfiddle.net/z88HH/3/this

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 に答える