我在 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') );
最佳答案
使用 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 中。
关于javascript - 我想用 JavaScript 交换 2 个相同的 HTML 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60713390/