Javascript - for循环中的函数内部函数

时间:2017-01-17 15:22:26

标签: javascript ajax

我是Javascript的新手,我正试图在Javascript中的for循环中调用另一个函数内的函数。我在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>

通过AJAX更新HTML的JS函数:

    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);

    }

2 个答案:

答案 0 :(得分:1)

没有理由在这里使用here。要绑定到所有按钮,只需要一个简单的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"); }); } 来获取您单击的元素。

Sub Example1()

Dim sht As Worksheet
Dim fndList As Variant
Dim rplcList As Variant
Dim x As Long

fndList = Array("hi", "United States", "Mexico")
rplcList = Array("hello", "USA", "MEX")

'Loop through each item in Array lists
  For x = LBound(fndList) To UBound(fndList)
    'Loop through each worksheet in ActiveWorkbook
      For Each sht In ActiveWorkbook.Worksheets
        sht.Cells.Replace What:=fndList(x), Replacement:=rplcList(x), _
          LookAt:=xlPart, SearchOrder:=xlByRows, MatchCase:=False, _
          SearchFormat:=False, ReplaceFormat:=False
      Next sht

  Next x

End Sub

答案 1 :(得分:0)

试试这个(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传递了单击的按钮元素,它查看数据集(具有&#34;数据的所有元素 - &#39;)并选择data-name属性。它将此传递给您的函数。