javascript - .forEach 循环 : use variable

Question

我正在遍历一组 16 个 ID，并为每个 ID 分配一个 eventListener。我想向我的 php 文件发送一个数字(第一个 ID 为 1，第二个 ID 为 2，等等)，但似乎 i 比我希望的更动态.每个 id 发送 17。

klasses.forEach(function(klass){
    var svgElement = svgDoc.getElementById(klass); //get the inner element by id
    svgElement.addEventListener("mouseup",function(){
        $.ajax({
            type: "POST",
            url: "buildService.php",
            data: { "service" : i}
        }).done(function(msg){
            alert(lameArray[i]);
            $("#modalSpan").html(msg);
            $("#modmodal").modal();
        });
    });
    i++;
});

如何为每个设置一个特定的数字？我也试过:

var lameArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];
...
data: { "service" : lameArray[i]}

Answer 1

i 是什么？问题是 i 是一个全局变量，或者无论如何都是 forEach 循环之外的变量，所以当 mouseup 事件被触发时，值i in that istant 被使用，而不是定义事件监听器时它拥有的那个。

请注意，因为您使用的是 forEach，回调函数实际上是用第二个参数调用的，该参数是计数器。所以你可以使用:

klasses.forEach(function(klass, i) {
    ...
});

现在，i 是 forEach 范围内的一个变量，可以满足您的目的。 (forEach 也使用第三个参数调用回调函数，即集合本身 - klasses 在您的例子中。)

注意:由于您使用的是 jQuery，因此您应该使用更“类似 jQuery”的风格进行编码。所以像这样改变你的代码:

$.each(klasses, function(i, klass) {
    $("#" + klass).mouseup(function(){
        $.ajax({
            type: "POST",
            url: "buildService.php",
            data: {service: i + 1}
            ...
        });
    });
});