切片 querySelector 但在 Submit() 上修改 DOM

Question

在这篇文章的帮助下，以下是无线电输入的验证脚本：Validating Multiple Radio Button Groups in Vanilla JS

我现在需要在单选输入的 parentNode 被切片后添加一个类。这可能吗？下面的代码在这里工作：https://jsfiddle.net/arkjoseph/aw0kvfm5/49/ 但如果它没有验证，它需要一个错误类。有没有办法绕过切片数组或者我需要执行另一个循环？

编辑我原来的问题： 我怎样才能只访问带有 hasUnanswered 的元素，而不是每个可用的收音机。

给出这个代码：

    function submit(event) {
      const radio_htm = document.querySelectorAll('input[type=radio]');
      const radios_array = Array.prototype.slice.call(radio_htm);

      // Reduce to get an array of radio button sets
    const questions = Object.values(radios_array.reduce((result, el) => {
      return Object.assign(result, {[el.name]: (result[el.name] || []).concat(el)});
    }, {}));

    // Loop through each question, looking for any that aren't answered.
    const hasUnanswered = questions.some(question => {
      !question.some(el => {
        return el.checked;
      })
     });

    if (hasUnanswered) {
        radio_not_pass = false;
        // Retrieve DOM element from sliced array - radios_array and modify dom.
        // Suggestion works here.  
        // What about accessing only radios that = hasUnanswered
        radios.forEach(radio=>radio.parentNode.classList.add('error'))

    } else {
      radio_not_pass = true;

    }

    if (!radio_not_pass) {
     event.preventDefault();
    }

Answer 1

该数组包含所有元素，因此您可以遍历它并将类添加到每个元素的父级。

radios_array.forEach(radio=>radio.parentNode.classList.add('my-class'))

您可以使用forEach 和some 有条件地添加错误类。

let hasUnanswered = false;
questions.forEach(question => {
  if(!question.some(el => {
    return el.checked;
  })){
    hasUnanswered = true;
    question.forEach(el => el.parentNode.classList.add('error'));
  } else {
    question.forEach(el => el.parentNode.classList.remove('error'));
  }
});