将变量从PHP函数传递给JS

安德鲁·ThinkUp

我刚刚创建了我的第一个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/

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

查理

您可以使用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 );

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

PHP:将变量传递给函数

来自分类Dev

将php变量传递给jQuery函数

来自分类Dev

使用JS将变量传递给PHP

来自分类Dev

将PHP var传递给js函数

来自分类Dev

将变量传递给函数

来自分类Dev

将变量传递给函数

来自分类Dev

如何将JS变量传递给PHP变量

来自分类Dev

如何将 js 变量传递给 php 变量?

来自分类Dev

如何将smarty变量传递给php函数?

来自分类Dev

PHP使用变量将多个参数传递给函数

来自分类Dev

将多行PHP变量传递给Javascript函数

来自分类Dev

将PHP Date变量传递给Javascript函数

来自分类Dev

在将php数组变量传递给Javascript函数时出错

来自分类Dev

如何将值从JavaScript函数传递给PHP变量?

来自分类Dev

将PHP变量传递给JavaScript超链接函数

来自分类Dev

将变量传递给PHP函数(即使未定义)

来自分类Dev

将jquery变量传递给php函数作为参数

来自分类Dev

将mysql列传递给php函数变量

来自分类Dev

将变量传递给Node.JS回调函数

来自分类Dev

js将变量传递给返回未定义的函数

来自分类Dev

如何将js变量传递给Rails函数

来自分类Dev

将Django模板变量传递给JS函数

来自分类Dev

如何将js变量传递给Rails函数

来自分类Dev

js将变量传递给返回未定义的函数

来自分类Dev

无法将表 td 值传递给 JS 函数变量

来自分类Dev

将变量传递给php

来自分类Dev

在PHP循环内调用js函数,同时将php变量作为参数传递给函数之一

来自分类Dev

如何将PHP变量传递给angular js?

来自分类Dev

安全地将JS变量传递给PHP