如何通过json数组使用JavaScript循环?

时间:2017-12-20 17:34:22

标签: javascript json fancybox

如何通过此代码使用for循环?

$(".open-slide").on('click', function(){
var ddd = ['/cheetahadmin/Templates/uploads/Agency/slides/agenc-contact.jpg', '/cheetahadmin/Templates/uploads/Agency/slides/agency-about.jpg', '/cheetahadmin/Templates/uploads/Agency/slides/agency-index.jpg'];
$.fancybox.open([

                for(var i=0; i<=ddd.length; i++){
                    {
                        src  : ddd[i],
                        opts : {
                            caption : 'Example Caption'
                        }
                    },
                }

            ], {
                loop : false,
                toolbar: false
            });
        });

此代码给我一个错误: 未捕获的SyntaxError:意外的令牌 而且我知道我有错,但我不知道如何解决这个问题。

3 个答案:

答案 0 :(得分:0)

由于对array.map的调用返回另一个数组,并且您的start数组很容易映射到您想要的数组,因此可以使用.map解决方案,而不是先构建数组并将其存储到另一个变量中,然后调用.open将该变量作为参数传递。

$.fancybox.open(ddd.map(function (el) {
  return {
    src: el, 
    opts: { 
      caption: 'Example Caption' 
    }
  };
}), {
  loop : false,
  toolbar: false
});

答案 1 :(得分:0)

您可以创建一个新的对象数组,如:

var arrOptions = [];
for (var i = 0; i < ddd.length; i++) {
  arrOptions.push({
    src: ddd[i],
    opts: { caption: 'Example Caption' }
  });
}

然后将其传递给fancybox,如:

$.fancybox.open(arrOptions, {
  loop: false,
  toolbar: false
});

答案 2 :(得分:0)

您希望将字符串数组转换为对象数组。你在做什么不会产生那种。您需要将代码拉出数组。现在你可以使用for循环并推送构建数组

&#13;
&#13;
var ddd = ['/cheetahadmin/Templates/uploads/Agency/slides/agenc-contact.jpg', '/cheetahadmin/Templates/uploads/Agency/slides/agency-about.jpg', '/cheetahadmin/Templates/uploads/Agency/slides/agency-index.jpg'];

var formatted = [];
for (var i=0; i<ddd.length; i++) {
  formatted.push({
    src: ddd[i],
    opts: {
      caption: 'Example Caption'
    }
  })
}
console.log(formatted)
&#13;
&#13;
&#13;

但大多数人会跳过for循环并使用map()

&#13;
&#13;
var ddd = ['/cheetahadmin/Templates/uploads/Agency/slides/agenc-contact.jpg', '/cheetahadmin/Templates/uploads/Agency/slides/agency-about.jpg', '/cheetahadmin/Templates/uploads/Agency/slides/agency-index.jpg'];

var formatted = ddd.map(function(val) {

  return {
    src: val,
    opts: {
      caption: 'Example Caption'
    }
  }

});

console.log(formatted);
&#13;
&#13;
&#13;

然后你会做

$.fancybox.open(formatted, { /* other code */ });