Javascript 在运行jQuery时使用eval（）在for（）中创建动态变量的替代方法？

我对JS相当陌生，对jQuery不是很熟悉，但我想尝试一下动态调用

例如，在我的网站上有一个photoslider，它可以随机循环浏览3张图片，我希望slimbox在第一张图片上再显示2张，在最后一张图片上再显示1张。这意味着slimbox将在幻灯片中总共显示6幅图像

因此，如果您需要它，下面是详细的演练：当用户访问我的站点时，用户将看到一个div块，一次显示一个图像。photoslider中的图像将旋转到下一个（随机加载的3个图像中的一个）。当用户单击图像时，用户将触发slimbox（轻量级lightbox），屏幕上将出现较大的幻灯片（背景变暗）。通过slimbox，用户将看到多达6个图像循环

为了创建动态变量，我尝试在FOR循环中使用EVAL，但在运行jQuery时失败。不过，EVAL在循环之外工作。我不确定该用哪个函数来代替。让我们深入研究代码

通过JS调用slimbox:

// usage as shown for multi-image slideshow.  yes, there are arrays within an array
jQuery.slimbox([["image","desc"], ["image","desc"], ["image","desc"]], startAtImage);

// or simplified further
jQuery.slimbox([[array1], [array3], [array2]], startAtImage);

// after appending the images to select the first and last images 
jQuery.slimbox([[array1], [array4], [array5], [array3], [array2], [array6]], startAtImage);

var imgAlbum = "summer";

var arrayGiven = [1,3,2];       // randomized image order given

var img1 = [4,5];               // registering images to be appended -- aiming for [1,4,5]
var img2 = [6];                 // registering images to be appended -- aiming for [2,6]

var desc1 = "Description #1";   // unique descriptions
var desc2 = "Description #2";
var desc3 = "Description #3";
var desc4 = "Description #4";
var desc5 = "Description #5";
var desc6 = "Description #6";

var arrayExtended = arrayGiven;

for(var i=1; i<=3; i++){                                            // cycle through arrayGiven and append images
    var imgLocate = i;
    var imgAtIndex = jQuery.inArray(imgLocate,arrayExtended);       // locating array index number of a specific image.  if imgLocate = 1, then imgAtIndex = 0 , if 2 then 4, and so forth
    var imgAfter = imgAtIndex + 1;                                  // allows appending to selected image at index

    eval("var imgCurrent = img" + imgLocate + ";");                 // creating dynamic variable
    if(imgCurrent != null){
        arrayExtended.splice(imgAfter, 0, imgCurrent); 
    }       
}   // alert(arrayExtended) should be [1,4,5,3,2,6]

for(var i=1; i<=arrayExtended.length; i++){
    var imgLocate = i;

    eval("var array" + imgLocate + " = ['img/" + imgAlbum +  "/" + imgLocate + ".jpg',desc" + imgLocate + "];");    // if imgLocate = 1, then var array1 = ['img/summer/1.jpg',desc1];
                                                                                                                    // array1 array2 array3 array4 array5 array 6 ... now defined
}

var arrayMain = [];

for(var i=1; i<=arrayExtended.length; i++){                         // must wait for arrays to be built before adding to arrayMain
    var atIndex = i - 1;

    var imgAtIndex = jQuery.inArray(imgLocate,arrayExtended);       // if imgLocate = 1, then imgAtIndex = 0 , if 2 then 4

    eval("arrayMain.push('[' + array" + arrayExtended[atIndex] + " + ']');");
}

var imgClicked = 0;                                                 // clicked on image within arrayExtended index 0
var startAtImage = imgClicked;                                      // slimbox slideshow will start on 1.jpg

jQuery.slimbox("[" + mainArray + "]",startAtImage);

jQuery.slimbox([["img/summer/1.jpg","Desciption #1"], ["img/summer/4.jpg","Desciption #4"], ["img/summer/5.jpg","Desciption #5"], ["img/summer/3.jpg","Desciption #3"], ["img/summer/2.jpg","Desciption #2"]], ["img/summer/6.jpg","Desciption #6"], 0);

下面是我动态调用slimbox函数的尝试：

// usage as shown for multi-image slideshow.  yes, there are arrays within an array
jQuery.slimbox([["image","desc"], ["image","desc"], ["image","desc"]], startAtImage);

// or simplified further
jQuery.slimbox([[array1], [array3], [array2]], startAtImage);

// after appending the images to select the first and last images 
jQuery.slimbox([[array1], [array4], [array5], [array3], [array2], [array6]], startAtImage);

var imgAlbum = "summer";

var arrayGiven = [1,3,2];       // randomized image order given

var img1 = [4,5];               // registering images to be appended -- aiming for [1,4,5]
var img2 = [6];                 // registering images to be appended -- aiming for [2,6]

var desc1 = "Description #1";   // unique descriptions
var desc2 = "Description #2";
var desc3 = "Description #3";
var desc4 = "Description #4";
var desc5 = "Description #5";
var desc6 = "Description #6";

var arrayExtended = arrayGiven;

for(var i=1; i<=3; i++){                                            // cycle through arrayGiven and append images
    var imgLocate = i;
    var imgAtIndex = jQuery.inArray(imgLocate,arrayExtended);       // locating array index number of a specific image.  if imgLocate = 1, then imgAtIndex = 0 , if 2 then 4, and so forth
    var imgAfter = imgAtIndex + 1;                                  // allows appending to selected image at index

    eval("var imgCurrent = img" + imgLocate + ";");                 // creating dynamic variable
    if(imgCurrent != null){
        arrayExtended.splice(imgAfter, 0, imgCurrent); 
    }       
}   // alert(arrayExtended) should be [1,4,5,3,2,6]

for(var i=1; i<=arrayExtended.length; i++){
    var imgLocate = i;

    eval("var array" + imgLocate + " = ['img/" + imgAlbum +  "/" + imgLocate + ".jpg',desc" + imgLocate + "];");    // if imgLocate = 1, then var array1 = ['img/summer/1.jpg',desc1];
                                                                                                                    // array1 array2 array3 array4 array5 array 6 ... now defined
}

var arrayMain = [];

for(var i=1; i<=arrayExtended.length; i++){                         // must wait for arrays to be built before adding to arrayMain
    var atIndex = i - 1;

    var imgAtIndex = jQuery.inArray(imgLocate,arrayExtended);       // if imgLocate = 1, then imgAtIndex = 0 , if 2 then 4

    eval("arrayMain.push('[' + array" + arrayExtended[atIndex] + " + ']');");
}

var imgClicked = 0;                                                 // clicked on image within arrayExtended index 0
var startAtImage = imgClicked;                                      // slimbox slideshow will start on 1.jpg

jQuery.slimbox("[" + mainArray + "]",startAtImage);

jQuery.slimbox([["img/summer/1.jpg","Desciption #1"], ["img/summer/4.jpg","Desciption #4"], ["img/summer/5.jpg","Desciption #5"], ["img/summer/3.jpg","Desciption #3"], ["img/summer/2.jpg","Desciption #2"]], ["img/summer/6.jpg","Desciption #6"], 0);

任何帮助或建议都将不胜感激！有很多东西要学

更新日期8-26-11 根据建议改变结构。还向阵列中添加了更多图像和组，以更好地说明所需的功能。尝试从img对象调用图像组（1、2、7）时出错：

        var imgAlbum = "summer";

        var arrayGiven = [1,3,2,7,11];      // randomized image order given

        var img = {
          1: [4,5],
          2: [6],
          7: [10,8,9]
        };

        var desc = {
          1: 'Description #1',
          2: 'Description #2',
          3: 'Description #3',
          4: 'Description #4',
          5: 'Description #5',
          6: 'Description #6',
          7: 'Description #7',
          8: 'Description #8',
          9: 'Description #9',
          10:'Description #10',
          11:'Description #11'
        };

        var arrayExtended = arrayGiven.slice();

        for(var i=1; i<=arrayGiven.length; i++){                                        
            var imgLocate = i;
            var imgAtIndex = jQuery.inArray(imgLocate,arrayExtended);       
            var imgAfter = imgAtIndex + 1;                                  
            var imgCurrent = img[imgAfter];

            if(imgCurrent != null){
                arrayExtended.splice(imgAfter, 0, imgCurrent); 
            }       
            //alert(imgCurrent);    // shows 4,5 undefined undefined undefined undefined
        }   //alert(arrayExtended);// shows 1,4,5,3,2,6,7,10,8,9,11
        var imgArray = {};
        for(var i=1; i<=arrayExtended.length; i++){
            var imgLocate = i;
            var atIndex = i - 1;

            imgArray[imgLocate] = ['imgs/'+imgAlbum+'/'+imgLocate+'.jpg', desc[imgLocate]];
        }

        var mainArray = [];

        for(var i=1; i<=arrayExtended.length; i++){                         
            var imgLocate = i;                  
            var atIndex = i - 1;

            mainArray.push(imgArray[arrayExtended[atIndex]]);   
            //alert(imgArray[arrayExtended[atIndex]]); // shows (simplified) 1.jpg,Desc#1 undefined 3.jpg,Desc#3 2.jpg,Desc#2 undefined undefined

        }

        var imgClicked = 0;                                                 
        var startAtImage = imgClicked; 

jQuery.slimbox(mainArray,startAtImage);

var imgAlbum=“summer”；
var arrayGiven=[1,3,2,7,11]；//随机图像顺序
var img={
1: [4,5],
2: [6],
7: [10,8,9]
};
变量描述={
1:‘说明#1’，
2:‘说明#2’，
3:‘说明#3’，
4:‘说明#4’，
5:‘说明#5’，
6:‘说明#6’，
7:‘说明#7’，
8:‘说明#8’，
9:‘说明#9’，
10:“说明#10”，
11:“说明#11”
};
var arrayExtend=arrayGiven.slice（）；
对于（变量i=1；i-1；j--）{
var imgMore=imgCurrent[j]；
阵列扩展拼接（imgAfter，0，imgMore）；
}
}
else{arrayExtended.splice（imgAfter，0，imgCurrent）；}
}
}   
var imgArray={}；
因为（var i=1；i任何你不能做的原因

    var imgCurrent = 'img' + imgLocate;

？基本上，从脚本中动态生成/执行代码从来都不是一个好主意。调试几乎是不可能的，而且如果没有eval，你甚至不会真正做任何事情。
任何你不能做的事情

    var imgCurrent = 'img' + imgLocate;

？基本上，从脚本中动态生成/执行代码从来都不是一个好主意。调试几乎是不可能的，而且你甚至没有真正做任何一件在没有eval的情况下无法完成的事情。
全局变量是
窗口
对象的成员，因此你可以做：

var imgCurrent = window["img" + imgLocate];

但是，使用这样的动态变量名不是一个好的做法。您应该将值放入数组中：

var img = [
  [4,5],
  [6]
];

现在，您只需访问阵列项：

var imgCurrent = img[imgLocate];

但是请注意，数组索引从0开始，而不是从1开始。
全局变量是
窗口
对象的成员，因此您可以执行以下操作：

var imgCurrent = window["img" + imgLocate];

但是，使用这样的动态变量名不是一个好的做法。您应该将值放入数组中：

var img = [
  [4,5],
  [6]
];

现在，您只需访问阵列项：

var imgCurrent = img[imgLocate];

但是请注意，数组索引从0开始，而不是从1开始。
使用数组或对象，而不是使用多个变量作为
img

var img = {
  1: [4,5],
  2: [6]
};

然后，您可以执行以下操作，而不是
eval（“var imgCurrent=img”+imgLocate+”；）；
：

var imgCurrent = img[imgLocate];

您可以为以下对象执行相同的操作：

eval("var array" + imgLocate + " = ['img/" + imgAlbum +  "/" + imgLocate + ".jpg',desc" + imgLocate + "];");

创建一个对象并将数组放入其中：

var desc = {
  1: 'Description #1',
  2: 'Description #2',
  3: 'Description #3',
  4: 'Description #4',
  5: 'Description #5',
  6: 'Description #6'
};
var imgArray = {};
imgArray[imglocate] = ['img/'+imgAlbum+'/'+imgLocate+'.jpg', desc[imgLocate]];

编辑：尝试将
var imgLocate=i；
更改为（var i=1；i的
内部
，而不是为
img
使用多个变量，使用数组或对象

var img = {
  1: [4,5],
  2: [6]
};

然后，您可以执行以下操作，而不是
eval（“var imgCurrent=img”+imgLocate+”；）；
：

var imgCurrent = img[imgLocate];

您可以为以下对象执行相同的操作：

eval("var array" + imgLocate + " = ['img/" + imgAlbum +  "/" + imgLocate + ".jpg',desc" + imgLocate + "];");

创建一个对象并将数组放入其中：

var desc = {
  1: 'Description #1',
  2: 'Description #2',
  3: 'Description #3',
  4: 'Description #4',
  5: 'Description #5',
  6: 'Description #6'
};
var imgArray = {};
imgArray[imglocate] = ['img/'+imgAlbum+'/'+imgLocate+'.jpg', desc[imgLocate]];

编辑：尝试更改
var imgLocate=i；
内的
for（var i=1；i一些快速注释：

请不要使用
eval（）

您已经发现JavaScript没有“变量变量”（即通过名称获取或设置变量的能力），这就是为什么您必须求助于
eval（）
。当您需要从集合中查找某些内容时，不要使用一组编号的变量。请尝试使用数组或对象

JavaScript中的对象在分配给变量时不会被复制

var arrayExtended = arrayGiven;

不复制
arrayGiven
-
arrayExtended
最终成为指向同一数组的变量。因此，当您在
arrayExtended
中更改某些内容时，它也会在
arrayGiven
中更改它。如果需要在JavaScript中复制数组，请使用
.slice（）
，不带任何参数：

var arrayExtended = arrayGiven.slice();

JavaScript中的其他一些东西，比如对象，更难复制

你想在这里做什么？（
mainArray
已经是一个数组）这将创建一个字符串，它是一个“[”，后跟
mainArray
（数组中的每个项目用逗号分隔），后跟“]”。Slimbox不知道如何处理它

jQuery.slimbox("[" + mainArray + "]",startAtImage);

如果您确实想将某个内容包装在数组中，只需像您一样在其周围加上括号即可