0

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

以下是相关代码：

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，而不是一遍又一遍地编写它。我不知道我是否以正确的方式进行此操作，但任何见解都会很棒。再次感谢！

4

3 回答 3

2

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

  1. 您在数组中有 jQuery 代码字符串，racerImage它们最终只是字符串，而不是实际的 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);
}
于 2013-09-17T22:50:29.320 回答
1

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]();
于 2013-09-17T22:48:57.750 回答
1

我会这样做：

var racer = ['ryan', 'pier', 'jeremy', 'matt', 'andrew', 'alan', 'kevin', 'mike', 'doug'];
$.each(racer, function(i, v){
  $('img.'+v+'thumb').click(function(){
    showRacer(v);
  })
});
于 2013-09-17T23:04:38.183 回答