gpt4 book ai didi

javascript - 在 JavaScript 中的两个列表之间移动项目

转载 作者:行者123 更新时间:2023-11-30 09:42:54 29 4
gpt4 key购买 nike

我想在两个列表之间移动项目。所有列表项中都有按钮,单击此按钮后,项目应移至其他列表。我已经创建了 JavaScript 事件,但它只能以一种方式工作——所以该项目可以移动一次,例如从 list1 到 list2 但是当我尝试再次单击该按钮时,它不起作用。你能看看我的代码并建议我如何将我的事件也分配给新创建的项目(这些项目刚刚被移动)吗?

 document.addEventListener("DOMContentLoaded", function () {

var buttons = document.querySelectorAll(".moveBtn");

var list1 = document.getElementById("list1");

var list2 = document.getElementById("list2");

function moveItem(e) {
var newItem = document.createElement("li");

if (this.parentElement.parentElement.id === "list1") {
list2.appendChild(newItem);


} else {
list1.appendChild(newItem);

}

newItem.innerHTML = this.parentElement.innerHTML;
this.parentElement.parentNode.removeChild(this.parentElement);

}

for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", moveItem);
}

})

最佳答案

与其销毁旧元素并创建新元素,不如移动元素:

function moveItem(e) {
var moveTo = this.parentElement.parentElement.id == "list1" ? list2 : list1;
moveTo.appendChild(this.parentElement);
}

另请注意,无需匹配 id;您可以匹配实际元素:

function moveItem(e) {
var moveTo = this.parentElement.parentElement == list1 ? list2 : list1;
moveTo.appendChild(this.parentElement);
}

实例:

document.addEventListener("DOMContentLoaded", function() {
var buttons = document.querySelectorAll(".moveBtn");
var list1 = document.getElementById("list1");
var list2 = document.getElementById("list2");

function moveItem(e) {
var moveTo = this.parentElement.parentElement == list1 ? list2 : list1;
moveTo.appendChild(this.parentElement);
}

for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", moveItem);
}
});
#list1 {
border: 1px solid green;
}
#list2 {
border: 1px solid blue;
}
<div id="list1">
<div>
Item 1
<button class="moveBtn">Move</button>
</div>
<div>
Item 2
<button class="moveBtn">Move</button>
</div>
<div>
Item 3
<button class="moveBtn">Move</button>
</div>
</div>
<div id="list2">
<div>
Item 4
<button class="moveBtn">Move</button>
</div>
<div>
Item 5
<button class="moveBtn">Move</button>
</div>
<div>
Item 6
<button class="moveBtn">Move</button>
</div>
</div>

关于javascript - 在 JavaScript 中的两个列表之间移动项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40290096/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com