使用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

每个函数的a语法：

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完全相同。

CROSS JOIN vs INNER JOIN in SQL Server 2008，以防万一。

调整以适合您的问题：

$(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 === "");
        })
    })
});