Question

我有这个小提琴：https://jsfiddle.net/cs3xt67j/3/

它会在点击按钮时创建带有标签的新div。我在每个选项卡上添加了一个eventListener，它假设隐藏容器内的每个div，除了与该选项卡相关的div之外：

 function showThisDiv(selection){
  console.log(selection)
  var children = document.getElementById('mainContainerDiv').childNodes;
  for(i=0;i<children.length;i++){
  if(selection!=children[i].id){
    document.getElementById(selection).classList.add('hidden');
  }
    document.getElementById(selection).classList.remove('hidden');
  }

  console.log(children)
  //document.getElementById(selection).classList.remove('hidden');
  }

我在第一次创建div时（在从按钮点击调用的函数中）添加了这个事件，如下所示：

 newDivTab.addEventListener("click",function(){ return showThisDiv('containerDiv'+divCount)});

但是每次事件触发时，它都会调用添加到事件中的最后一个选择，而不是在创建div时添加的内容。如果您从小提琴中看到控制台日志，可能会更容易。只需通过单击按钮创建几个选项卡，然后单击创建的选项卡，然后查看控制台日志

Answer 1

Working demo.

基本上您需要复制divCount的值并将其存储到其他上下文中以保留其值。

所以，而不是：

newDivTab.addEventListener("click",function(){ return showThisDiv('containerDiv'+divCount)});

使用：

var localCount = divCount;
newDivTab.addEventListener("click",function(){ return showThisDiv('containerDiv'+localCount)});

Answer 2

每次点击div时都会调用函数

function(){ return showThisDiv('containerDiv'+divCount)}

所以字符串'containerDiv'+divCount的串联在点击之前不会被评估，所以它使用divCount的当前值，所以可能的div。

这些被称为闭包，很多聪明的人都写过它们：http://www.mennovanslooten.nl/blog/post/62

为了修复你正在做的事情我会建议将onclick函数包装在另一个函数中并将其传递给想要的id

newDivTab.addEventListener("click",(function(divID){ 
    return function(){
      showThisDiv('containerDiv'+divID)
    }
})(divCount))

引用上面的链接（我相当于你的divCount）：

调用此函数会为每次迭代创建一个新的变量作用域，因为变量作用域是在执行时创建的。这允许我将i的值传递给这个新范围。

停止点击事件触发附加的最后一件事

2 个答案: