在特定位置插入多個元素

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(", ")}`
  })
})