Javascript - 函数里面的功能循环

Question

我是新来的Javascript和我试图调用JavaScript中的循环内的另一个函数内的函数。我阅读了关于JS循环中关闭和范围的所有答案，但仍然无法使其工作。基本上我试图做的是将一个事件监听器附加到数组的每个元素。

这里是我的代码：

HTML：

<div class="todo-item"> 
     To Do item #1 
     <button class="btn btn-success btn_task" data-name="data1">Done</button> 
    </div> 

    <div class="todo-item"> 
     To Do item #2 
     <button class="btn btn-success btn_task" data-name="data2">Done</button> 
    </div> 

    <div class="todo-item"> 
     To Do item #3 
     <button class="btn btn-success btn_task" data-name="data3">Done</button> 
    </div> 

JS功能的更新HTML通过AJAX：

function showTodo(str, label) { 

     var xmlhttp = new XMLHttpRequest(); 
     xmlhttp.onreadystatechange = function() { 

      if (this.readyState == 4 && this.status == 200) { 
       document.getElementById("todo").innerHTML = this.responseText; 
      } 

     }; 
     xmlhttp.open("GET", "../datasource.php?lang=" + label + "&data=" + str, true); 
     xmlhttp.send(); 

} 

的部分不工作：

var todoElements = document.getElementsByClassName("btn_task"); 

for (var i = 0; i < todoElements.length; i++) { 

     (function(index) { 
       todoElements[index].addEventListener("click", function(){ 
       var attribute = todoElements[index].getAttribute('data-name'); 
       showTodo(attribute, "Spanish"); 
      }) 
     })(i); 

    } 

Answer 1

这里没有理由使用IIFE。要绑定到所有按钮，您只需要一个简单的for循环。

在事件处理程序中，您可以使用this来获取您单击的元素。

var todoElements = document.getElementsByClassName("btn_task"); 

for (var i = 0; i < todoElements.length; i++) { 
    todoElements[i].addEventListener('click', function(){ 
     showTodo(this.getAttribute('data-name'), "Spanish"); 
    }); 
} 

Answer 2

试试这个代替（ES6）：

function getAttr(e){ 
    const name = this.dataset.name; 
    showTodo(name, "Spanish"); 
} 

const buttons = document.querySelectorAll('.btn_task'); 

buttons.forEach(button => button.addEventListener('click', getAttr)); 

我们在这里做的是让所有的按钮，分配给每个按钮称为GETATTR点击处理程序。 getAttr传递被点击的按钮元素，它查看数据集（具有“data-”的元素的所有属性）并选择data-name属性，并将其传递给函数。