使用普通的javascript / jquery

Question

我正在制作一个WordPress主题，使用Vegas作为背景滑块。首先，使用硬编码图像路径，我使滑块工作。现在我正试图让它充满活力。

Vegas不支持HTML数据属性，因此我需要关注their JS syntax。 Vegas用于声明幻灯片的语法如下：

$elmt.vegas({
    slides: [
        { src: '/img/slide1.jpg' },
        { src: '/img/slide2.jpg' },
        { src: '/img/slide3.jpg' },
        { src: '/img/slide4.jpg' }
    ]
});

问题是，我使用PHP查询获取滑块图像，并使用wp_get_attachment_image_src()获取这些图像的确切大小。所以我正在制作这些图像的数组，PHP函数返回：

Array ( [0] => http://localhost/oneproject/wp-content/uploads/2016/05/slider-image-1200x260.jpg [1] => http://localhost/oneproject/wp-content/uploads/2016/05/disabled-allowance-870x260.jpg )

所以我使用wp_localize_script() json_encode( my_array_func() )传递它们。

在.js文件中我得到了这个：

var slider_images = JSON.parse( one.slider_images );
console.log(slider_images);

控制台输出以下内容：

我现在正在努力，我如何使用这个JSON数组并将其用于使用给定语法的Vegas？

我试过（可能看起来像业余的）：

$("#my-slider").vegas({
    slides: [

        $.each(slider_images, function( index, value ) {
            //console.log(value);
            { src: "'"+ value +"'" } + ","
        })

    ]
});

但它没有加载图像，滑块无效。

我也尝试在一个数组中创建JS Object：

var myObject = new Object();
myObject.src = slider_images;
$.each(slider_images, function( index, value ) {
   myObject.src = value;
});
var myString = JSON.stringify(myObject);
console.log(myString);

但是让第一个好看，但第二个得到双引号，而不是工作。

我完全卡住了。任何帮助都将受到高度赞赏。

Answer 1

你正在使用这个权利。

var slider_images = JSON.parse( one.slider_images );
console.log(slider_images);

你能做的就是这个。

首先，创建一个新数组，您将存储与数据兼容的对象。

var newArray = []

接下来循环浏览每个滑块图像并创建一个对象，您将在上面的newArray中进行推送。

slider_images.forEach(function(e, i){
    var newData = {
        src: e
    };
    newArray.push(newData);
});

最后，在滑块中使用新创建的数组。

$("#my-slider").vegas({
    slides: newArray
});

让我知道这是否有效。

Answer 2

你做知道如果你使用JSON.stringify(object)，那么你必须通过JSON.parse(object)解析它来'解码'吗？这似乎是你的问题。