WordPress：将PHP数组传递给JS函数

Question

我希望使用一个 PHP 数组，在 WP 循环中检索到该数组，并将其用于一个分离的 js 文件中的 JavaScript 函数。

这是我在循环中回显我的 PHP 数组（来自高级自定义字段）的方式：

$images = get_field('galerie');
if( $images ): ?>
    <?php 
    $i = 0;
    foreach( $images as $image ): 
        $i++;
        ?>
        <div class="slider">
             <?php echo $image['url']; ?>');">
        </div>
    <?php endforeach; ?>
<?php endif; ?>

在最终的代码中，这将看起来像这样：

。

<div class="slider">   
   THERE_GOES_THE_IMG_URL_1 
   THERE_GOES_THE_IMG_URL_2 
   THERE_GOES_THE_IMG_URL_3
</div>

但是我需要在我的Vegas Slider JQuery插件中使用图像URL。 代码位于单独的custom.js文件中，看起来像这样：

$(".slider").vegas({
      slides: [
          { src: "THERE_GOES_THE_IMG_URL_1" },
          { src: "THERE_GOES_THE_IMG_URL_2" },
          { src: "THERE_GOES_THE_IMG_URL_3" }
      ]
  });

我该如何将PHP循环中的图像URL传递到jQuery插件中？

谢谢你的帮助！ Cara

- CaraMar

Answer 1

我不知道你的数组结构，但是你可以使用json_encode($images)，并通过wp_localize_script将数据传递给JS变量。所以在functions.php中你需要这样做：

$images = get_field('galerie');
$images = json_encode($images);

wp_enqueue_script( 'my_js_file', get_template_directory_uri() . '/js/custom.js' );
$data_to_send = array(
    'images' => $images
);
wp_localize_script( 'my_js_file', 'object_name', $data_to_send );

然后在你的javascript文件custom.js中，你可以像这样获取你需要的内容：

var my_images = JSON.parse(object_name.images);
var imagesToAppend = [];
for(var i = 0; i < my_images.length; i++){
    var img_src = my_images[i].url;
    imagesToAppend[i] = { src: img_src };
}
console.log(imagesToAppend);
$(".slider").vegas({
      slides: imagesToAppend
  });

请注意，您需要使用 JSON.parse 解析响应字符串。

一个简化的解决方案是从ACF更改url的名称为src，这样您就不必使用循环并将对象的键更改为src，然后只需将my_images附加到Vegas滑块init中，如下所示：

var my_images = JSON.parse(object_name.images);
$(".slider").vegas({
  slides: my_images
});

此外，如果您以其他方式包含custom.js脚本，那么请将其删除，否则您将会受到两次相同的响应。

这真的取决于您的数组结构，但这应该能够工作。

同时，您可以在这里阅读有关wp_localize_script的更多信息。

- Ionut Necula

---

非常感谢你，Ionut。你的解决方案对我来说完美无缺！已经实现且没有错误！真的很棒！ - CaraMar

@CaraMar，太棒了。我很高兴它起作用了。很高兴能帮忙。 - Ionut Necula