将变量从PHP函数传递给JS

时间:2015-07-17 15:49:14

标签: javascript php jquery wordpress

我刚刚创建了我的第一个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秒。关注来自this post的@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. 我在主线程上获得 同步XMLHttpRequest已弃用,因为它对最终用户的体验有不利影响
  2. 此变量似乎未成功传递到flexslider args。
  3. 我还想在PHP中设置$ settime的默认值,以便在回调函数中不传递值的用户也具有5秒的基本标准。我在thinkup_testimonials()的开头尝试使用if(!isset($settime)){$settime = 5000};;但它会导致致命错误。关于这一点的一些指示也很棒。
  4. 你可以在这里看到http://www.thinkupdesign.ca/testimonials-plugin/

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

2 个答案:

答案 0 :(得分: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 );

答案 1 :(得分:1)

嗯,&#34;同步XMLHttpRequest&#34;消息是因为在某些时候,你的JS代码应该向服务器发出同步的ajax请求,我不认为它与你将变量从PHP传递给JS的方式没有任何关系。

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

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

第三,简单地尝试一下,让我们说默认值为5000:

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