Wordpress：将 php 数组放入 JS-Function

Posted 2023-02-24

【中文标题】Wordpress：将 php 数组放入 JS-Function

【英文标题】：Wordpress: Getting an php Array into JS-Function

【发布时间】：2017-05-06 21:14:55

【问题描述】：

我想使用一个 php 数组，我在 WP-Loop 中将它检索到一个 javascript 函数中，我在一个单独的 js 文件中拥有它。

这就是我在循环中回显我的 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" 
      ]
  );

如何将图像 URL 从 php 循环传递到 jQuery 插件？

感谢您的帮助！ 卡拉

【参考方案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 解析响应字符串。

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

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

另外，如果您以其他方式包含 custom.js 脚本，那么我在上面举例说明，请删除它，否则您将获得两次相同的响应。

这确实取决于您的数组结构，但这应该可以。

此外，您还可以阅读有关wp_localize_script here的更多信息。

【讨论】：

非常感谢，Ionut。您的解决方案对我来说非常有效！已经实现并且没有错误！真的很棒！

@CaraMar，太棒了。我很高兴它奏效了。乐于助人。