Question

我正在使用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循环，如果可能的话，请提前感谢！

Answer 1

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

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
});

Answer 2

试试这个

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);
});

这是内联的，可以得到;）

希望这会有所帮助......

Answer 3

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

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)
});

对于循环内部对象javascript

3 个答案: