在jQuery函數正確輸出的JavaScript變量

Question

我本來以爲這是一個WordPress的問題 - 而是嘗試小時後實現 - 這可能是一個比較普遍的JavaScript問題

我一直在掙扎這几几小時，我希望你能指出我的方向。我一直在使用this教程來幫助我理解wp_localize_script是如何工作的（這是一個WordPress函數，它允許您將PHP變量傳遞給JS文件）。首先，我排隊我的腳本，例如：

function of_load_scripts() { 

    if (!is_admin()) { 

     if(is_front_page()) { 
      global $post; 
      wp_register_script('supersized.shutter', get_template_directory_uri().'/js/mylibs/supersized.shutter.min.js', 'jquery'); 
      wp_enqueue_script('supersized.shutter'); 
      wp_register_script('shutter_home', get_template_directory_uri().'/js/shutter-home.js', 'jquery'); 
      wp_enqueue_script('shutter_home'); 
     } 

     $tester = get_field('text'); 

     // Add some parameters for the JS. 
     wp_localize_script(
      'shutter_home', 
      'shutter', 
      array(
       'testerjs' => $tester 
      ) 
     ); 
    } 

} 
add_action('wp_print_scripts', 'of_load_scripts'); 

我已經驗證這是輸出到網頁的HTML源代碼：

<script type='text/javascript'> 
/* <![CDATA[ */ 
var shutter = {"testerjs":"This is a test value"}; 
/* ]]> */ 
</script> 

然後，在我的shutter-home.js文件，我有以下幾點：

jQuery(document).ready(function($) { 

    var testerjs = shutter.testerjs; 
    alert(testerjs); 

    $.supersized({ 

     // Functionality 
     slideshow    : 1,   // Slideshow on/off 
     autoplay    : 1,   // Slideshow starts playing automatically 
     start_slide    : 1,   // Start slide (0 is random) 
     stop_loop    : 0,   // Pauses slideshow on last slide 
     random     : 0,   // Randomize slide order (Ignores start slide) 
     slide_interval   : 3000,  // Length between transitions 
     transition    : 1,   // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left 
     transition_speed  : 700,  // Speed of transition 
     new_window    : 1,   // Image links open in new window/tab 
     pause_hover    : 0,   // Pause slideshow on hover 
     keyboard_nav   : 1,   // Keyboard navigation on/off 
     performance    : 0,   // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit) 
     image_protect   : 0,   // Disables image dragging and right click with Javascript 

     // Size & Position       
     min_width    : 0,   // Min width allowed (in pixels) 
     min_height    : 0,   // Min height allowed (in pixels) 
     vertical_center   : 1,   // Vertically center background 
     horizontal_center  : 1,   // Horizontally center background 
     fit_always    : 0,   // Image will never exceed browser width or height (Ignores min. dimensions) 
     fit_portrait   : 1,   // Portrait images will not exceed browser height 
     fit_landscape   : 0,   // Landscape images will not exceed browser width 

     // Components       
     slide_links    : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank') 
     thumb_links    : 1,   // Individual thumb links for each slide 
     thumbnail_navigation : 0,   // Thumbnail navigation 

     // Components       
     slides     : [   // Slideshow Images 
             {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg'}, 
             {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg'}, 
             {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg'}, 
             {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg'}, 
             {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg'}, 
             {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg'}, 
             {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg'}, 
             {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg'}, 
             {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg'}, 
             {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg'}, 
             {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg'}, 
             {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg'} 
            ], 
     // Theme 
     progress_bar   : 0   // Slide bar that shows duration until next transition 

    }); 

}); 

這只是正常輸出This is a test value（因爲我做了一個快速alert()）。我遇到的問題是將此值傳遞給$.supersized函數（具體位於image位置的slides區域中）。這可能是一個普通的JS問題 - 但是我該怎麼去堅持在那個區域內插入這個變量呢？我試過這樣的東西：

{image : ''+ testerjs + '', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg'}, 

沒有骰子。任何幫助將不勝感激！

testerjs僅僅是一個例子變量 - 它通常會舉行一個圖像URL - 所以只是用於舉例的目的

Answer 1

如果你不能只傳遞對象的數組要建立由JavaScript對象在wp_localize_script功能和傳遞，作爲幻燈片參數，你可以建立你的URL的數組中的PHP如

$slides = array(
    array('image' => 'http://...', 'thumb' => 'http://...'), 
    array('image' => 'http://...', 'thumb' => 'http://...'), 
    array('image' => 'http://...', 'thumb' => 'http://...') 
); 

json_encode這個數組，那麼它會給你你需要在你的JavaScript幻燈片參數的數據結構。

wp_localize_script(
    'shutter_home', 
    'shutter', 
    array('slides' => json_encode($slides)) 
); 

然後，你應該能夠解析這個並將其用作傳遞給$ .supersized函數的對象的幻燈片參數。

slides: $.parseJSON(shutter.slides.replace('"', '"') 

最好的選擇是使用生成的對象，這樣就可以趕上與可能畸形的JSON可能出現的任何錯誤之前做了解析。

---

編輯：從給予片斷更正代碼。

您將每個圖像/拇指對象附加爲一個字符串，所以這些字符串仍然是js中的字符串。另外，您在幻燈片參數的JavaScript中有幾個語法錯誤（缺少括號和分號），我刪除了不必要的字符串替換。

// php 
$imageArray = array(); 
if(get_field('image_container')) { 
    while(the_repeater_field('image_container')) { 
     $imageSource = wp_get_attachment_image_src(get_sub_field('image'), 'full'); 
     $thumbSource = wp_get_attachment_image_src(get_sub_field('image'), 'background_thumb'); 
     array_push($imageArray, array('image'=> $imageSource[0], 'thumb' => $thumbSource[0])); 
    } 
} 

$imageOutput = json_encode($imageArray); 

// Add some parameters for the JS. 
wp_localize_script(
    'shutter_home', 
    'shutter', 
    array(
     'imageOutputjs' => $imageOutput 
    ) 
); 

//js 
slides : $.parseJSON(shutter.imageOutputjs)