This question already has answers here:
JavaScript closure inside loops – simple practical example

(44个答案)


在10个月前关闭。




我写了以下HTML。我的想法是,我可以将项目添加到顶部的列表中,然后生成一个包含名称,复选框和文本字段的字段。取决于复选框,文本字段将被启用/禁用。在我的JavaScript中,切换功能已分配给复选框字段的onclick属性,但仅适用于列表中的最后一项。谁能说说为什么没有将此功能分配给所有复选框?如果在浏览器中打开生成的html代码,则除最后一个复选框外,其他任何复选框均未显示onclick事件,因此似乎未添加该复选框。当我将其分配给下一个时,它会以某种方式从上一个中删除吗?我该如何解决?谢谢。
<!DOCTYPE html>
<html>

<body onload="loadAllSettings()" }>
    <script>
        var genOptFields = ["genField1", "genField2"];

        function loadAllSettings() {
            loadSettingsList("genSet", genOptFields);
        }
    </script>
    <h2>Options</h2>

    <form>
        <fieldset id="genSet">
            <legend>General</legend>
        </fieldset>
    </form>


    <script>

        function loadSettingsList(parentId, optionalFields) {
            var fieldset = document.getElementById(parentId);
            for (fieldId of optionalFields) {
                var p = document.createElement('p');

                p.append(fieldId + ":");

                var input = document.createElement('input');
                input.type = "text";
                input.disabled = true;
                input.id = fieldId;

                var cb = document.createElement('input');
                cb.type = "checkbox";
                cb.id = "cb_" + fieldId;
                cb.addEventListener("click", function () {
                    toggleCheck(fieldId);
                });

                p.appendChild(cb);
                p.appendChild(input);

                fieldset.appendChild(p);
            }
        }
        function toggleCheck(fieldId) {
            document.getElementById(fieldId).disabled = !document.getElementById("cb_" +
            fieldId).checked;
        }
    </script>

</body>

</html>

最佳答案

如下所述,您的fieldId引用不是静态的。因此,调用切换检查时,无论如何,它总是传递fieldId包含的最后一个值(通过console.logging进行双重检查。

function loadAllSettings() {
  const genOptFields = ["genField1", "genField2"];
  loadSettingsList("genSet", genOptFields);
}
function loadSettingsList(parentId, optionalFields) {
    const fieldset = document.getElementById(parentId);
    optionalFields.forEach(function (fieldId) {
      createParagraph(fieldId, fieldset);
    });
}
function createParagraph(fieldId, fieldset) {
  const p = document.createElement('p');
  p.append(fieldId + ":");
  createCheckbox(p, fieldId);
  createInputField(p, fieldId);
  fieldset.appendChild(p);
}
function createInputField(p, fieldId) {
  const input = document.createElement('input');
  input.type = "text";
  input.disabled = true;
  input.id = fieldId;
  p.appendChild(input);
}
function createCheckbox(p, fieldId) {
  const cb = document.createElement('input');
  cb.type = "checkbox";
  cb.id = "cb_" + fieldId;
  //set this attribute to capture value
  cb.setAttribute('data-fieldId', fieldId);
  cb.addEventListener("click", function () {
    //use static data attribute value instead of fieldId var which isnt static
      toggleCheck(this.getAttribute('data-fieldId'));
  });
  p.appendChild(cb);
}
function toggleCheck(fieldId) {
    document.getElementById(fieldId).disabled = !document.getElementById("cb_" + fieldId).checked;
}
<!DOCTYPE html>
<html>

<body onload="loadAllSettings()" }>
    <h2>Options</h2>

    <form>
        <fieldset id="genSet">
            <legend>General</legend>
        </fieldset>
    </form>
</body>

</html>

09-17 11:57
查看更多