使用 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 === "");
        })
    })
});

使用 for_each 遍历表单输入

Using for_each to iterate over form inputs

javascript

simple-form

每个函数的语法：

根据您的问题进行调整：