jQuery函数中正确输出JavaScript变量

Correctly outputting JavaScript Variables in jQuery function

本文关键字：输出 JavaScript 变量 函数 jQuery      更新时间：2023-09-26

我原本以为这是WordPress的问题-但经过几个小时的尝试后意识到-这可能是一个更一般的JavaScript问题

我已经为此挣扎了几个小时，希望你能给我指出正确的方向。我一直在使用这个教程来帮助我理解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问题-但我该如何去粘在testerjs变量到该区域?我试过这样做:

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

没有骰子。任何帮助将非常感激!

testerjs只是一个示例变量-它通常会保存一个图像URL -因此仅用于示例目的

如果你不能通过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幻灯片参数

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

然后你就可以解析和使用它作为对象的幻灯片参数传递到美元。超大型的功能。

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

最好的办法是在使用结果对象之前进行解析，这样您就可以捕获可能出现的错误JSON。

edit:更正了注释中提供的代码片段。

你是附加每个图像/拇指对象作为一个字符串，所以这些将是字符串仍然在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)
相关文章：