1

我想介绍一个简单的符号来将 HTML<input>元素绑定到 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>

然而，只有第二个输入字段的行为符合我的意愿。有人可以解释为什么会这样吗？我猜这与闭包有关。我真的想了解我做错了什么而不是找到解决方案（我可以使用 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 需要是一个数组，因此它不会在循环中被覆盖或

您可以在表单标签中放置一个 id，然后引用它来获取字段作为其子元素。

于 2013-01-08T08:14:13.970 回答
0

你的child变量是全局的。尝试使用：

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

反而。由于它是全局的，因此您将在第二轮覆盖全局子变量。

于 2013-01-08T08:14:31.837 回答