如何解决将范围附加到相应的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);
}
})
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。