javascript - 将变量从 PHP 函数传递到 JS

Question

我刚刚创建了我的第一个 Wordpress 插件，它创建了一个带有调用回调函数的推荐旋转器，并将其放置在主题模板文件中。基本功能是..

function thinkup_testimonials(){
  if ( is_active_sidebar( 'thinkup-testimonials' ) ) :
    echo '<!-- Testimonials -->
        <div id="thinkup-testimonials" class="flexslider">
        <ul class="testimonials slides">';
        dynamic_sidebar('thinkup-testimonials');
    echo'</ul></div><!-- testimonial section -->';
  endif;
}

因此，用户在模板中调用 thinkup_testimonials(); ，一切都很好。

我现在的问题是，我希望用户能够以简单的方式控制旋转器中幻灯片之间的时间(在 JS 文件中声明)。

我的目标是让他们在模板中声明 thinkup_testimonials(9000);，然后将时间设置为 9 秒。遵循@Madara Uchicha this post 的指导!我决定尝试#2。将数据回显到页面中的某处，并使用 JavaScript 从 DOM 获取信息。所以我将上面的函数修改为这样..

function thinkup_testimonials($settime){
  if ( is_active_sidebar( 'thinkup-testimonials' ) ) :
    echo '<!-- Testimonials -->
          // Creates hidden HTML element with time delay
          <input type="hidden" class="tut-timer" value="'. $settime . '">
          <div id="thinkup-testimonials" class="flexslider">
          <ul class="testimonials slides">';
          dynamic_sidebar('thinkup-testimonials');
    echo'</ul></div><!-- testimonial section -->';
  endif;
}

现在的 JS 是..

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

            var timer = $('input.tut-timer').val();
            console.log(timer)

            $('#thinkup-testimonials').flexslider({
                slideshow: true,
                animationDuration: 200,
                slideshowSpeed: 'timer'
            });
        });

虽然这似乎至少正确地传递了 $settime 变量，并使用 console.log() 输出它，但是..

1. 我收到主线程上的同步 XMLHttpRequest 已被弃用，因为它会对最终用户的体验产生不利影响
2. 该变量似乎没有成功传递到 flexslider args 中。
3. 我还想在 PHP 中为 $settime 设置一个默认值，以便不在回调函数中传递值的用户也有 5 秒的基本标准。我尝试在 thinkup_testimonials(); 的开头使用 if(!isset($settime)){$settime = 5000};但这会导致 fatal error 。关于这一点的一些指示也很棒。

您可以在这里看到它 http://www.thinkupdesign.ca/testimonials-plugin/

非常感谢您提供的任何帮助!

Answer 1

您可以使用 data- 属性，而不是使用隐藏输入。

从输入返回的值将是字符串而不是数字，因此您需要注意作为值传递给插件选项的类型。

尝试如下:

<ul class="testimonials slides" data-timer="'.$settime.'">

然后在JS中

var $slider = $('#thinkup-testimonials'),
    timer = +$slider.data('timer');

    $slider.flexslider({
                slideshow: true,
                animationDuration: 200,
                slideshowSpeed: timer /// note you were using string not variable here
    });

如果您想让用户更加灵活，您可以将更多选项作为属性传递，并使用 $slider.data() 作为一个对象进行检索，您可以使用它来扩展默认值:

var sliderDefaults={
    slideshow: true
}
var userOpts = $.extend( sliderDefaults, $slider.data());
$slider.flexslider(userOpts );