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函数中传递此值（特别是slides位置的image区域）。这可能是一个普遍的JS问题 - 但我如何将testerjs变量粘贴到该区域？我尝试过这样的事情：

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

没有骰子。任何帮助将不胜感激！

testerjs只是一个示例变量 - 它通常会包含图片网址 - 因此仅用于示例目的

Answer 1

如果您不能通过wp_localize_script函数传递要构建为JavaScript对象的对象数组，并将其作为slides参数传递，则可以在php中构建URL数组，例如

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

json_encode此数组将为您提供JavaScript中slide参数所需的数据结构。

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

然后您应该只能解析它并将其用作传递给$ .supersized函数的对象的slides参数。

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

最好的办法是在使用生成的对象之前进行解析，这样就可以捕获可能出现错误的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)

在jQuery函数中正确输出JavaScript变量

1 个答案: