我在 JavaScript 中交換兩個 HTML 元素時遇到一些問題。在下面的 HTML 中，我想使用 id 為“down1”和“up1”的按鈕將 id 為“ans1”的 div 與 id 為“ans2”的 div 進行切換。我不想專門選擇“ans1”和“ans2”，因為這是一個排序測驗，容器 1 和 2 的第一個子元素可能需要使用這些相同的按鈕再次移動。<div id="quiz" class="quiz-container d-none"> <div id="question" class="quiz-question"></div> <div id="container1" class="answer-container"> <div id="ans1" class="answer"></div> <div class="button-container"> <button id="down1" class="down first-button"><i class="fas fa-chevron-down"></i></button></div> </div> <div id="container2" class="answer-container"> <div id="ans2" class="answer"></div> <div class="button-container"> <button id="up1" class="up1"><i class="fas fa-chevron-up"></i></button><button id="down2" class="down"><i class="fas fa-chevron-down"></i></button> </div>在 JavaScript 中，我一直在嘗試下面代碼的各種版本。有時這兩個元素會消失，有時整個父元素而不只是子元素會切換位置。誰能告訴我切換這兩個元素的正確語法，以便可以使用同一按鈕多次切換子元素？$('#container1:first').appendTo( $('#container2') );
3 回答
小唯快跑啊
TA貢獻1863條經驗 獲得超2個贊
使用 vanilla JS 很容易做到。
document.getElementById('btn').addEventListener('click', () => {
const c1 = document.getElementById('c1');
const c2 = document.getElementById('c2');
c2.appendChild(c1.firstElementChild);
c1.appendChild(c2.firstElementChild);
});
<div id="c1">
<div>item 1</div>
</div>
<div id="c2">
<div>item 2</div>
</div>
<button id="btn">switch</button>
注意，這依賴于我將一個元素附加到容器末尾的事實，因此firstElementChild仍然會拾取正確的元素。如果需要，您可以在進行交換之前將這些元素存儲在 vars 中。
PIPIONE
TA貢獻1829條經驗 獲得超9個贊
該代碼在一定程度上有效。當我按下“down1”按鈕時，兩個元素會切換位置，但當我再次按下它以將它們交換回來時，按鈕會切換位置。當我再次按下按鈕（現在處于錯誤的位置）時，元素會切換回來，我必須第四次按下按鈕才能將按鈕恢復到原來的狀態。我還嘗試選擇第二個 Id“up1”按鈕來執行相同的功能，但該按鈕根本不起作用。你有什么IDE可以解決這個問題嗎？我將在下面分享我當前的代碼
document.getElementById("down1", "up1").addEventListener('click', () => {
answerTwoContainer.appendChild(answerOneContainer.firstElementChild);
answerOneContainer.appendChild(answerTwoContainer.firstElementChild);
});
<div id="quiz" class="quiz-container d-none">
<div id="question" class="quiz-question"></div>
<div id="container1" class="answer-container">
<div id="ans1" class="answer"></div>
<div class="button-container">
<button id="down1" class="down first-button"><i class="fas fa-chevron-down"></i></button></div>
</div>
<div id="container2" class="answer-container">
<div id="ans2" class="answer"></div>
<div class="button-container">
<button id="up1" class="up"><i class="fas fa-chevron-up"></i></button><button id="down2" class="down"><i class="fas fa-chevron-down"></i></button>
</div>
</div>
- 3 回答
- 0 關注
- 143 瀏覽
添加回答
舉報
0/150
提交
取消