将变量从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的指导这个帖子 ！ 我决定尝试＃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. 我不赞成在主线程上使用Synchronous XMLHttpRequest，因为它对最终用户的体验有不利影响
2. 该变量似乎没有成功传递到flexslider args中。
3. 我还想在PHP中为$ settime设置默认值，以便在回调函数中不传递值的用户也具有5sec的基本标准。 我试过使用if(!isset($settime)){$settime = 5000}; 在我的thinkup_testimonials（）的开头内； 但这会导致致命错误。 关于此的一些指示也将很棒。

您可以在这里实时查看它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 );

Answer 2

好吧，“ Synchronous XMLHttpRequest”消息是因为在某个时候，您的JS代码应该向服务器发出同步ajax请求，我认为这与将变量从PHP传递给JS的方式没有任何关系。

第二点是因为您必须将参数传递给flexslider而不带引号：

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

第三，简单地尝试一下，假设默认值为5000：

function thinkup_testimonials($settime=5000){
    ....