Question

我正在尝试传入图像列表以获得使用图像的大胆弹出窗口，但是如果我将它们作为变量传递则不起作用。我可以在console.log中输出变量的输出并粘贴代替变量在magnific调用中，它可以正常工作。为什么在这里传递变量的任何想法都不起作用？

Here您可以对其进行编辑，但必须查看here才能对其进行测试。

同样，您可以复制console.log的输出并将其粘贴到变量 compiledList 的位置，它只能用作变量。

以下是代码......

$(function(){

var urlList = ["http://img3.wikia.nocookie.net/__cb20140125162709/cartoonfatness/images/c/c0/Futurama.jpg","http://img3.wikia.nocookie.net/__cb20140125162709/cartoonfatness/images/c/c0/Futurama.jpg","http://img3.wikia.nocookie.net/__cb20140125162709/cartoonfatness/images/c/c0/Futurama.jpg"];


var compiledList = ( '{src : \'' + urlList.join('\'}, {src : \'') + '\'}' );


$('a').on('click',function(e){
e.preventDefault();
$.magnificPopup.open({
items: [compiledList],
gallery: {
  enabled: true
},
type: 'image',
callbacks: {
  open: function() {
  console.log(compiledList);
  }
}
});
});
});

Answer 1

您目前正在做的是制作一个字符串，当console.log ed看起来像一个对象，但事实并非如此。这里有2个简单的选项。

只需使用urlList

{src: "URL"}

使用for loop迭代urlList并创建一个对象数组。我在下面添加了这段代码。

http://jsbin.com/sokidazi/2

var urlList = ["http://img3.wikia.nocookie.net/__cb20140125162709/cartoonfatness/images/c/c0/Futurama.jpg","http://img3.wikia.nocookie.net/__cb20140125162709/cartoonfatness/images/c/c0/Futurama.jpg","http://img3.wikia.nocookie.net/__cb20140125162709/cartoonfatness/images/c/c0/Futurama.jpg"],
    i = 0,
    l = urlList.length,
    compiledList = [];
for(;i < l;i++){
  compiledList.push({src: urlList[i]});
}


$('a').on('click',function(e){
  e.preventDefault();
  $.magnificPopup.open({
  items: compiledList,
    gallery: {
      enabled: true
    },
    type: 'image',
    callbacks: {
      open: function() {
      console.log(compiledList);
      }
    }
  });
});

巨大的传递阵列

1 个答案: