如何增加 jQuery 元素 ID答案

【问题标题】：How To Increment jQuery Element ID如何增加 jQuery 元素 ID
【发布时间】：2012-01-28 14:18:17
【问题描述】：

我有 jPlayer（jquery 音频播放器）的实例：jPlayer1、jPlayer2、jPlayer3、jPlayer4，每个都初始化并预加载了音频文件。

下面的调用函数将遍历现有数组并添加播放预加载音频的方法。

function addPlayAudioMethodToExerciseArray(){
    for (i in qaArray){
        qaArray[i].playAnswer = function(){ $('#jPlayer'+i).jPlayer('play',0);}
    }
}

除了 ('#jPlayer'+i) 部分未评估为 ('#jPlayer1')、('#jPlayer2') 等之外，它创建的方法正常。

提前非常感谢。注意：我是菜鸟。

【问题讨论】：

对于 JavaScript 新手来说，这是一个极其常见的陷阱。
你能告诉我们什么包含 qaArray 吗？ - 在你 for(i in qaArray) 你的 i 开始为 0，所以第一个 '#jPlayer'+i 将是 '#jPlayer0'......它不存在。我还认为你必须添加一些闭包，否则你我将永远是最后一个（qaArray.length-1）。
我为发布简化了它。原代码有 if (i>0){//start traversing}。所以是的，该方法是从 qaArray[1] 开始添加的。当 '#jsPlayer1' 被硬编码时，它可以工作。当然，所有方法都只是触发相同的 jsPlayer1；不符合预期。

标签： javascript jquery increment

【解决方案1】：

问题是所有这些“playAnswer”函数都包裹在同一个“i”变量周围。也就是说，只有一个“i”（在这种情况下，由于您没有使用 var 声明它，所以它是全局的！）。

您需要做的是使用另一个函数为每个回调提供一个单独的“i”。

function addPlayAudioMethodToExerciseArray(){
    function makePlayerCallback(i) {
      return function() {
        $('#jPlayer' + i).jPlayer('play', 0);
      };
    }

    for (var i = 0; i < qaArray.length; ++i){
        qaArray[i].playAnswer = makePlayerCallback(i);
    }
}

“makePlayerCallback”函数有自己的参数“i”，它实际上是那个函数的本地参数，将导致回调函数分别有自己的“i”。对该函数的每次调用都会在返回的回调函数周围创建一个所谓的“闭包”。（请注意，我的循环从零开始；如果您在 HTML 中的标识符从 1 开始，您需要通过在某处添加 1 来解决此问题。感谢@DieVarDump 的注释。）

请注意，我用var 声明了循环中使用的“i”，以使其成为“addPlayAudioMethodToExerciseArray”的本地变量（这是一个很长的函数名；我希望你不必经常输入它 :-) .此外，我将它用作数字索引，假设“qaArray”确实是一个诚实的数组，而不仅仅是 n 对象。对数组使用数字索引是一种很好的做法。

【讨论】：

如果 ID 真的从 1 开始 (jPlayer1, jPlayer2, jPlayer3, jPlayer4) 你必须调用 makePlayerCallback(i+1);因为数组索引从 0 开始
console.debug 仍然显示： playAnswer: function () {$('#jPlayer' + i).jPlayer('play', 0);}
没关系，@10davvid - 因为额外的函数调用（对makePlayerCallback()），它是一个不同的“i”。
抱歉，说得太早了。是的，它有效！所以没关系，在运行时（调用方法时）对 Id 进行评估。谢谢大家。 @Pointy 你教我函数可以返回函数。酷。
哇。现在代码可以完美运行，我仍然无法理解。如果 console.debug 显示： playAnswer: function () {$('#jPlayer' + i).jPlayer('play', 0);} 表示 i 在调用方法 playAnswer 时需要它的值，但到那时没有 i价值包装它了？？？对我来说似乎是魔法。任何人都可以向 6 岁以上 40 岁的人解释一下吗？

【解决方案2】：

使用colsures

试试这个：

    for(i in qaArray)
    {
        qaArray[i].playAnswer = function (num)
        {
            return function ()
            {
                $('#jPlayer' + num).jPlayer('play', 0);
            } ;
        }(i)
    };

【讨论】：