嘿,所以我想做一个“网站”,您可以在其中添加和删除列表中的人,然后添加到另一个人。添加有效,但删除不能正常工作。如您所见,add和remove子句彼此非常相似,唯一的区别是getElementById()
中的id。
let names = [];
names[0] = "Daniel";
names[1] = "Anna";
names[2] = "Sarah";
names[3] = "Karl";
names[4] = "Tim";
names[5] = "Simon";
names[6] = "Klara";
names[7] = "David";
names[8] = "Hugo";
document.getElementById("add").addEventListener("click",add);
document.getElementById("remove").addEventListener("click",remove);
for(let i = 0; i < 9; i++){
document.getElementById("participants").innerHTML += "<div class='normal' id='"+names[i]+"'>"+names[i]+"</div>";
}
for(let i = 0; i < 9; i++){
document.getElementById(names[i]).addEventListener("click",chosen);
}
function chosen(){
let item = document.getElementById(this.id);
if(item.classList.contains("chosen")){
item.classList.remove("chosen");
}else{
item.classList.add("chosen");
}
}
function add(){
let arr = [];
arr = document.getElementsByClassName("chosen");
for(let i = 0; i < arr.length; i++){
document.getElementById("members").appendChild(arr[i]);
}
}
function remove(){
let test = [];
test = document.getElementsByClassName("chosen");
console.log(test);
for(let i = 0; i < test.length; i++){
document.getElementById("participants").appendChild(test[i]);
}
}
答案 0 :(得分:0)
如果首先添加项目,然后设置事件监听器,并在父元素上监听click
,则可能会有更好的方法。根据目标,您将分派chosen
函数。
您可以利用事件冒泡来执行此操作。当您创建单独的for
语句时,不能保证该元素将在for语句完成运行后立即出现在DOM中。
var participants = document.getElementById('participants');
participants.onclick = function(event){
var id = event.target.id;
if(id){
let item = document.getElementById(this.id);
if(item.classList.contains("chosen")){
item.classList.remove("chosen");
}else{
item.classList.add("chosen");
}
//... the rest of your code
}
}
答案 1 :(得分:0)
看,您可以将id参数传递给所选的函数,这样您将拥有正确的元素。
这种方式:
之前
document.getElementById(names[i]).addEventListener("click",chosen)
.
.
.
function chosen() {
let item = document.getElementById(this.id);
if(item.classList.contains("chosen"))
item.classList.remove("chosen");
else
item.classList.add("chosen");
}
之后
document.getElementById(names[i]).addEventListener("click",chosen(names[i])
.
.
.
function chosen(chosenId) {
const item = document.getElementById(chosenId);
item.classList.toggle("chosen")
}
并尝试在这种情况下始终使用 const 变量,这样可以使代码更具可预测性
答案 2 :(得分:0)
您在代码中存在多个错误,添加和删除项目后未清除所选类,并非添加或删除了所有元素。 以下解决这些问题。 如果您需要ping我,我建议您将其重构并使其更通用。
const names = ["Daniel", "Anna", "Sarah", "Karl", "Tim" ,"Simon", "Klara", "David"];
document.getElementById("add").addEventListener("click",add);
document.getElementById("remove").addEventListener("click",remove);
for(let i = 0; i < names.length; i++){
document.getElementById("participants").innerHTML += "<div class='normal' id='"+names[i]+"'>"+names[i]+"</div>";
}
for(let i = 0; i < names.length; i++){
document.getElementById(names[i]).addEventListener("click",chosen);
}
function chosen(){
let item = document.getElementById(this.id);
if(item.classList.contains("chosen")){
item.classList.remove("chosen");
}else{
item.classList.add("chosen");
}
}
function add(){
members = document.getElementById("members");
Array.from(document.querySelectorAll(".chosen")).forEach((item)=> {
members.append(item)
item.classList.remove("chosen");
})
}
function remove(){
participants = document.getElementById("participants");
Array.from(document.querySelectorAll(".chosen")).forEach((item)=> {
participants.append(item)
item.classList.remove("chosen");
})
}