使用appendchild从Java div添加到另一个div（不起作用）

Question

嘿，所以我试图建立一个“网站”，在这里您可以从列表中添加和删除人员，然后添加到另一个。添加有效，但删除不能正常工作。如您所见，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]);
    }
}

Answer 1

如果先添加项目，然后设置事件监听器，并在父元素上侦听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
   }
}

Answer 2

看起来，您可以将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变量，这将使代码更具可预测性