对象 javascript 内部的 for 循环

For loop inside object javascript

本文关键字：for 循环 内部 javascript 对象      更新时间：2023-09-26

我正在使用lightGallery，我正在使用画廊的动态创建，这是仅生成一个图像的代码：

$(this).lightGallery({
    dynamic:true,
    dynamicEl: [{
        'src':'css/images/pictures/gal_'+id+'/1.jpg',
        'thumb':'css/images/thumbnails/gal_'+id+'/1.jpg'
    }]
});

这个id变量总是相同的，但是我想循环一个数字，例如从变量x中获取。因此，如果x=4生成的代码将如下所示：

$(this).lightGallery({
    dynamic:true,
    dynamicEl: [{
        'src':'css/images/pictures/gal_'+id+'/1.jpg', //here's 1
        'thumb':'css/images/thumbnails/gal_'+id+'/1.jpg'
    },{
        'src':'css/images/pictures/gal_'+id+'/2.jpg', //here's 2 and so on
        'thumb':'css/images/thumbnails/gal_'+id+'/2.jpg'
    },{
        'src':'css/images/pictures/gal_'+id+'/3.jpg',
        'thumb':'css/images/thumbnails/gal_'+id+'/3.jpg'
    },{
        'src':'css/images/pictures/gal_'+id+'/4.jpg',
        'thumb':'css/images/thumbnails/gal_'+id+'/4.jpg'
    }]
});

所以我想问题是如何在对象中包含 for 循环，如果可能的话，提前感谢！

No.对象定义中不可能有控制结构（如循环）。您需要先创建映像数组，如下所示：

var dynamicEl = [];
for (var i = 1; i <= 4; i++) {
  dynamicEl.push({
    'src':'css/images/pictures/gal_' + id + '/'+ i + '.jpg',
    'thumb':'css/images/thumbnails/gal_' + id + '/' + i + '.jpg'
  });
}

然后将其传递给对象定义：

$(this).lightGallery({
    dynamic:true,
    dynamicEl: dynamicEl
});

首先创建一个动态生成拇指的方法

function genThumbs(count, id)
{
   var arr = [];
   for ( var counter = 1; counter <= count; counter++)
   {
      arr.push( {
        'src':'css/images/pictures/gal_'+id+'/' + counter + '.jpg',
        'thumb':'css/images/thumbnails/gal_'+id+'/' + counter + '.jpg'
      } );
   }
   return arr;
}

然后在调用图库时使用相同的方法

$(this).lightGallery({
    dynamic:true,
    dynamicEl: genThumbs(5, id)
});

试试这个

var genEls = function(id, count)
{
    var els = [];
    for(i = 1; i <= count; i++)
    {
        els.push({
            'src':'css/images/pictures/gal_'+ id + '/' + i + '.jpg',
            'thumb':'css/images/thumbnails/gal_' + id + '/' + i + '.jpg',
        });
    }
return els;
}   
var id = 3;
var count = 4;
$(this).lightGallery({
    dynamic:true,
    dynamicEl: genEls(id,count);
});

这是尽可能内联的;)

希望这有帮助...

相关文章：