如何正确地将数组合并到 jquery/javascript 中的 for 循环中？

Question

我现在正在处理一个自定义库，但我似乎无法在循环期间获得要应用的变量数组。我错过了什么？

以下是相关代码：

var racerImage = ['$("img.ryanthumb")', '$("img.pierthumb")', '$("img.jeremythumb")',
       '$("img.mattthumb")', '$("img.andrewthumb")', '$("img.alanthumb")',
       '$("img.kevinthumb")', '$("img.mikethumb")', '$("img.dougthumb")'];

var showMe= ['showRacer("ryan")\;', 'showRacer("pier")\;',
       'showRacer("jeremy")\;', 'showRacer("matt")\;', 'showRacer("andrew")\;',
       'showRacer("alan")\;', 'showRacer("kevin")\;', 'showRacer("mike")\;', 
       'showRacer("doug")\;'];

for (var i = 0; i < racerImage.length; i++)
{
    racerImage[i].click(function(){
        switch (i)
        {
            case 0:
                showMe[i];
                break;
            case 1:
                showMe[i];
                break;
            case 2:
                showMe[i];
                break;
            case 3:
                showMe[i];
                break;
            case 4:
                showMe[i];
                break;
            case 5:
                showMe[i];
                break;
            case 6:
                showMe[i];
                break;
            case 7:
                showMe[i];
                break;
            case 8:
                showMe[i];
                break;
        }
    });
}

基本上，我尝试使用 for 循环多次应用 jquery，而不是一遍又一遍地编写它。我不知道我是否以正确的方式进行此操作，但任何见解都会很棒。再次感谢！

Answer 1

你最终遇到了三个主要问题：

1. racerImage 数组中有 jQuery 代码字符串，它们最终只是字符串，而不是实际的 jQuery 对象，因此它们不起作用。

2. showMe 数组中的函数调用代码字符串也不起作用。

3. 您在单击处理函数中的 i 值不起作用，因为事件处理程序会在一段时间后发生，此时 i 的值不再是您想要的值。

要解决这些问题，请将 racerImage 数组更改为仅包含选择器的数组，并在代码中需要时将它们转换为 jQuery 对象。

将showMe 数组更改为名称数组，您可以在需要时将其传递给showRacer() 函数。

而且，您根本不需要 switch 语句，因为 i 已经是您的索引。

var racerImage = ["img.ryanthumb", img.pierthumb, "img.jeremythumb",
       "img.mattthumb", "img.andrewthumb" /* and so on */];

var showMe= ["ryan", "pier", "jeremy", "matt" /* and so on */];

for (var i = 0; i < racerImage.length; i++) {
    // create closure to capture the value of i so it is available during the event handler
    (function(i) {
        $(racerImage[i]).click(function(){
            showRacer(showMe[i]);
        });
    })(i);
}

Answer 2

racerImage[0] 仍然只是一个包含值 $("img.ryanthumb") 的字符串 - 它不是 jQuery 对象。

您可能想要做的是将选择器值放入字符串中，然后从那里调用 jQuery 函数：

var racerImage = ['img.ryanthumb', 'img.pierthumb', ...etc...];

...

$(racerImage[i]).click(function(){...});

或者你可以让你的数组成为 jQuery 对象并使用它们：

var racerImage = [$("img.ryanthumb"), $("img.pierthumb"), ...etc...];

...

racerImage[i].click(function(){...});

编辑

感谢 Joel 的评论 - 是的，showRacer 上的同样问题 - 也许这些可以是一组函数：

var showMe= [function(){showRacer("ryan");}, function(){showRacer("pier");}, ...etc...];

...

showMe[i]();

Answer 3

我会这样做：

var racer = ['ryan', 'pier', 'jeremy', 'matt', 'andrew', 'alan', 'kevin', 'mike', 'doug'];
$.each(racer, function(i, v){
  $('img.'+v+'thumb').click(function(){
    showRacer(v);
  })
});