在特定位置插入多个元素

Question

我正在尝试在特定位置插入多个元素。

在这个例子中（见下文），我想始终将 ItemA1 插入第一位，将 ItemA2 始终插入第二位，依此类推。 问题是使用方法 parent.insertBefore(newSpan, parent.children[number])，如果你从最后检查收音机，它就不起作用：/

有没有办法对创建的元素“下订单”？

谢谢你的帮助：）

 function createItem(x,y){ let result = document.getElementById(x+"Rap") if(typeof(result) == 'undefined' || result == null){ let newSpan = document.createElement("span"); newSpan.setAttribute("id",x+"Rap") let newText = document.createTextNode("."); newSpan.appendChild(newText); document.getElementById("result").insertBefore(newSpan, document.getElementById("result").children[y]); } } function generateItem(x,y){ createItem(x,y); if (document.getElementById("NT"+x).checked === true){ document.getElementById(x+"Rap").remove(); } else{ document.getElementById(x+"Rap").innerHTML = document.querySelector("input[name="+x+"]:checked").value; } }

 #result{ margin-top: 10px; padding: 5px; border: solid black 1px; }

 <div> <div>itemA1 <input id="yesA1" name="A1" type="radio" value="item A1 = yes, " onchange="generateItem('A1',0)"/> <label for="yesA1">yes</label> <input id="noA1" name="A1" type="radio" value="item A1 = no, " onchange="generateItem('A1',0)"/> <label for="noA1">no</label> <input id="NTA1" name="A1" type="radio" value="item A1 = NT, " checked="checked" onchange="generateItem('A1',0)"/> <label for="NTA1">NT</label> </div> <div>itemA2 <input id="yesA2" name="A2" type="radio" value="item A2 = yes, " onchange="generateItem('A2',1)"/> <label for="yesA2">yes</label> <input id="noA2" name="A2" type="radio" value="item A2 = no, " onchange="generateItem('A2',1)"/> <label for="noA2">no</label> <input id="NTA2" name="A2" type="radio" value="item A2 = NT, " checked="checked" onchange="generateItem('A2',1)"/> <label for="NTA2">NT</label> </div> <div>itemB1 <input id="yesB1" name="B1" type="radio" value="item B1 = yes, " onchange="generateItem('B1',2)"/> <label for="yesB1">yes</label> <input id="noB1" name="B1" type="radio" value="item B1 = no, " onchange="generateItem('B1',2)"/> <label for="noB1">no</label> <input id="NTB1" name="B1" type="radio" value="item B1 = NT, " checked="checked" onchange="generateItem('B1',2)"/> <label for="NTB1">NT</label> </div> <div>itemB2 <input id="yesB2" name="B2" type="radio" value="item B2 = yes." onchange="generateItem('B2',3)"/> <label for="yesB2">yes</label> <input id="noB2" name="B2" type="radio" value="item B2 = no." onchange="generateItem('B2',3)"/> <label for="noB2">no</label> <input id="NTB2" name="B2" type="radio" value="item B2 = NT." checked="checked" onchange="generateItem('B2',3)"/> <label for="NTB2">NT</label> </div> <div id="result">Results: </div> </div>

Answer 1

Kinglish在评论中提到了这一点，但这里是一个示例，说明如何循环遍历所有无线电并在每次单击无线电时创建结果output 行。

 document.querySelectorAll("input[type='radio']").forEach(radio => { radio.addEventListener("click", e => { let result = [] document.querySelectorAll("input[type='radio']:checked").forEach(c => result.push(`item ${c.name} = ${c.value}`)) document.querySelector("#result").innerHTML = `Results: ${result.filter(f =>.f.includes("NT")),join(", ")}` }) })

 #result{ margin-top: 10px; padding: 5px; border: solid black 1px; }

 <div> <div>itemA1 <label><input name="A1" type="radio" value="yes">yes</label> <label><input name="A1" type="radio" value="no">no</label> <label><input name="A1" type="radio" value="NT" checked>NT</label> </div> <div>itemA2 <label><input name="A2" type="radio" value="yes">yes</label> <label><input name="A2" type="radio" value="no">no</label> <label><input name="A2" type="radio" value="NT" checked>NT</label> </div> <div>itemB1 <label><input name="B1" type="radio" value="yes">yes</label> <label><input name="B1" type="radio" value="no">no</label> <label><input name="B1" type="radio" value="NT" checked>NT</label> </div> <div>itemB2 <label><input name="B2" type="radio" value="yes">yes</label> <label><input name="B2" type="radio" value="no">no</label> <label><input name="B2" type="radio" value="NT" checked>NT</label> </div> <div id="result">Results:</div> </div>

按照您之前似乎拥有的逻辑，我们遍历所有单选按钮并首先附加一个点击事件侦听器。 单击时，它将遍历所有:checked单选按钮并获取这些单选按钮的name和value 。 最后，它连接所有值并显示它们。

任何值为“NT”的选中无线电都将被忽略（目前似乎是这种情况）。 值按照它们在页面上出现的顺序显示（这似乎符合您提供的特定示例，但如果有任何更改可能会返回混合结果）。

编辑

虽然上面的工作正常，但下面是 JavaScript 的修改版本，它使用map()获取所有选中的单选按钮的 output，而不是通过forEach()构建数组。

document.querySelectorAll("input[type='radio']").forEach(radio => {
  radio.addEventListener("click", e => {
    document.querySelector("#result").innerHTML = `Results : ${Array.from(document.querySelectorAll("input[type='radio']:checked")).map(m => `item ${m.name} = ${m.value}`).filter(f => !f.includes("NT")).join(", ")}`
  })
})