javascript - 如何正确地将数组合并到 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);
}