Question

我想使用一个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插件？

感谢您的帮助！卡拉

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解析响应字符串。

简化的解决方案是将url的名称从ACF更改为src，这样您就不必使用该循环并将对象的密钥更改为{{1然后你可以将src附加到Vegas滑块init，如下所示：

my_images

此外，如果您以其他方式包含var my_images = JSON.parse(object_name.images); $(".slider").vegas({ slides: my_images });脚本，我将在上面举例说明，请删除它，否则您将获得相同的响应两次。

这实际上取决于你的数组结构，但这应该有效。

此外，您可以详细了解custom.js here 。

Wordpress：将PHP数组转换为JS函数

1 个答案: