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

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

你在racerImage数组中有jQuery代码字符串，它们最终只是字符串，而不是实际的jQuery对象，所以它们不起作用。
showMe数组中的函数调用代码字符串也不起作用。
点击处理函数中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);
  })
});

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

3 个答案: