WordPress的：獲得一個PHP數組到JS函數

我想使用一個PHP數組，我正在WP-Loop中檢索到一個JavaScript函數，我有一個單獨的js文件。WordPress的：獲得一個PHP數組到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>

但我需要在我的拉斯維加斯滑塊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循環圖片網址到jQuery插件？

感謝您的幫助！卡拉

來源

2016-12-21 CaraMar

我不知道你的陣列的結構，但可以使用wp_localize_script在JS變量使用json_encode($images)和傳遞數據。因此，在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的名稱更改爲src從ACF，所以你不必使用該循環並更改按鍵的對象src，然後你可以追加my_images到拉斯維加斯滑塊初始化，像這樣：

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

另外，如果你是包括其他方式的custom.js腳本然後我上面列舉，請刪除，或者你會得到相同的響應兩次。

它真的取決於你的數組結構，但這應該工作。

此外，您還可以閱讀更多關於wp_localize_scripthere。

來源

2016-12-21 12:37:29 Ionut

非常感謝你，Ionut。您的解決方案對我來說非常合適已經實施，沒有錯誤！非常好！ – CaraMar

@CaraMar，真棒。我很高興它的工作。樂於幫助。 – Ionut

WordPress的：獲得一個PHP數組到JS函數

回答

相關問題