如何通過JSON數組使用JavaScript循環？

Question

如何通過此代碼使用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
            });
        });

這段代碼給了我一個錯誤：Uncaught SyntaxError：意外的令牌，我知道我有錯，但是我不知道該如何解決。

Answer 1

由於對array.map的調用返回了另一個數組，並且您的起始數組很容易映射到所需的數組，因此可以使用.map解決方案，而不.open構建該數組並將其存儲到另一個變量中，然后再調用.open將該變量作為參數傳遞。

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

Answer 2

您可以創建一個新的對象數組，例如：

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

Answer 3

您想要將字符串數組轉換為對象數組。 您正在做的事情不會產生這種結果。 您需要將代碼拉出數組。 現在，您可以使用for循環執行此操作並推送以構建數組

 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) 

但是大多數人會跳過for循環並使用map（）

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

那你就要做

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