将范围附加到相应的li元素JavaScript

问题描述

我是JS新手，在将跨距附加到正确位置时遇到问题。我有一个带有可选文本输入的清单。当复选框被选中并且文本输入具有值时，我想显示复选框值和文本输入值的文本。如果文本输入为空，我只想显示复选框的值。我已经尝试过了：

    function addBreakfastCheck1(e) {
      e.preventDefault();
      let checkBoxes = document.querySelectorAll('input[name="protein"]:checked');
      let servingTexts = document.querySelectorAll('input[name="servingTexts1"]');
      let li;
      let span;
      checkBoxes.forEach(function(checkBox) {
        if (checkBox.checked) {
          li = document.createElement('li');
          li.className = 'list-group-item';
          li.appendChild(document.createTextNode(checkBox.value));
          breakfastResult1.appendChild(li);
        }
      })
    
      servingTexts.forEach(function(servingText) {
        if (servingText && servingText.value) {
          span = document.createElement('span');
          span.appendChild(document.createTextNode(' ' + servingText.value));
          li.appendChild(span)
        }
      })
    }

它将所有文本输入值附加到提交时的最后一个li元素。如何获得每个跨度附加到相应的li元素上？

解决方法

您不需要两个循环。您应该遍历所有复选框（而不仅仅是选中的复选框）。 forEach()将数组索引作为另一个参数发送，您可以使用它来索引文本框以获取相应的值。

function addBreakfastCheck1(e) {
  e.preventDefault();
  let checkboxes = document.querySelectorAll('input[name="protein"]');
  let servingTexts = document.querySelectorAll('input[name="servingTexts1"]');
  checkboxes.forEach(function(checkbox,i) {
    if (checkbox.checked) {
      let li = document.createElement('li');
      li.className = 'list-group-item';
      li.appendChild(document.createTextNode(checkbox.value));
      let servingText = servingTexts[i];
      if (servingText && servingText.value) {
        let span = document.createElement('span');
        span.appendChild(document.createTextNode(' ' + servingText.value));
        li.appendChild(span)
      }
      breakfastResult1.appendChild(li);
    }
  })
}