javascript - 使用 for_each 遍历表单输入

Question

我有两种形式，一种是uk_inputs，另一种是international_inputs。当一个或多个 uk_inputs 被填写时，我想要它，所以另一种形式的国际输入被禁用。当第一个 uk_input 被填写时，这目前有效，但我无法设法让它工作，但用 for_each 遍历所有这些输入。第一个代码片段是它与第一个 uk_input 一起使用的地方，第二个代码片段是我尝试遍历所有这些代码片段的地方。如果不清楚，请道歉。谢谢

$(document).ready(function() {
    var uk_input = document.querySelector(".uk_input");
    uk_input.onchange = function () {
        international_input =  document.querySelectorAll(".international_input")
        international_input.forEach(function(international) {
            international.disabled = uk_input.value
        });
    }
});

$(document).ready(function() {
    var uk_input = document.querySelectorAll(".uk_input");
    uk_input.for_each.onchange = function (uk) {
        international_input =  document.querySelectorAll(".international_input")
        uk.international_input.forEach(function(international) {
            international.disabled = uk_input.value
        });
    }
});

<%= fields.input :line_1, input_html: {class: "uk_input"} %>
<%= fields.input :line_2, input_html: {class: "uk_input"}  %>
<%= fields.input :line_3, input_html: {class: "uk_input"}  %>
<%= fields.input :town, input_html: {class: "uk_input"}  %>
<%= fields.input :county, input_html: {class: "uk_input"}  %>
<%= fields.input :postcode, input_html: {class: "uk_input"}  %>

<%= fields.input :line_1, input_html: {class: "international_input"} %>
<%= fields.input :line_2, input_html: {class: "international_input"} %>
<%= fields.input :line_3, input_html: {class: "international_input"} %>
<%= fields.input :town, label: "City / Region", input_html: {class: "international_input"} %>
<%= fields.input :postcode, label: "Postcode / ZIP Code", input_html: {class: "international_input"} %>

Answer 1

每个函数的语法:

JavaScript 中for each 函数的正确语法是:

let uk_inputs = document.querySelectorAll(".uk_inputs");
uk_inputs.forEach(input=>{
    input.addEventListener("click",event=>{
      //Code you want to run for every uk_inputs class input
  })
})

此外，正如您在上面的代码中看到的那样，要分配一个事件监听器，您必须引用要分配该事件的 DOM 元素。这是一个普通的 JavaScript 解决方案。这与使用 jQuery 的结果完全相同。

Here is a functional fiddle.如果您想查看。

根据您的问题进行调整:

$(document).ready(function() {
    let uk_inputs = document.querySelectorAll(".uk_inputs"),
        international = document.querySelectorAll(".international");

    const enabledInternational = (enabled) => {
        international.forEach(input => {
            if (enabled) {
                input.removeAttribute("disabled");
            } else {
                input.setAttribute("disabled", `${enabled}`);
            }
        })
    }

    uk_inputs.forEach(input => {
        input.addEventListener("change", event => {
            enabledInternational(event.target.value === "");
        })
    })
});