1

<input>HTML要素を JavaScript オブジェクトにバインドする簡単な表記法を導入したいと思います。何かのようなもの：

<script>            
    var qform = {
        uid : "",
        pass : ""
    };
</script>

<form method="get" action="#">
    <input id="temp0" type="text" name="uid" bind="qform.uid" />
    <input id="temp1" type="password" name="pass" bind="qform.pass" />
    <input type="submit" value="submit" />
</form>

<input>s を変更すると、JS 変数が変更されます。私がそれを実装しようとしている方法は次のとおりです。

<script>

    var x = 0;
    for(x = 0; x < 2; x++) {

        var inputField = document.getElementById("temp" + x);


        var bindObj = inputField.getAttribute("bind");            

        var bindObjTree = bindObj.split(".");
        var parent = window;
        for (var i = 0; i < bindObjTree.length - 1; i++) {
            parent = parent[bindObjTree[i]];
        }
        child = bindObjTree[bindObjTree.length - 1];

        inputField.value = parent[child];

        inputField.onchange = function() {
            var xp = parent;
            var xc = child;
            xp[xc] = inputField.value;
            alert(JSON.stringify(window["qform"]));
        };

    } // for

    </script>

ただし、2 番目の入力フィールドのみが希望どおりに動作します。誰かがその理由を説明できますか? 私はそれが閉鎖と関係があると推測しています。私は解決策を見つけるのではなく、自分が間違っていることを理解しようとしています (これは JQuery で簡単に回避できますが、実際にはそうしたくありません)。

4

3 に答える 3

1

問題は次のとおりです。

        parent = parent[bindObjTree[i]];
        child = bindObjTree[bindObjTree.length - 1];

と

    inputField.onchange = function() {
        var xp = parent; // Always refers to the element retrieved at index 1 of the for loop
        var xc = child; // Always refers to the element retrieved at index 1 of the for loop
        // This is regardless of which input's event handler executes
        xp[xc] = inputField.value;
        alert(JSON.stringify(window["qform"]));
    };

これらは、クロージャーのため、for ループの最後の反復で見つかった要素を常に参照します。

于 2013-01-08T08:13:16.010 に答える
0

inputFields は配列である必要があるため、ループで上書きされたり、

form タグに id を配置し、代わりにそれを参照して、フィールドをその子要素として取得できます。

于 2013-01-08T08:14:13.970 に答える
0

あなたのchild変数はグローバルです。使用してみてください：

var child = bindObjTree[bindObjTree.length - 1];

代わりは。グローバルなので、2 番目のターンでグローバル子変数を上書きします。

于 2013-01-08T08:14:31.837 に答える