点击主题打开小部件的jQuery wordpress定制器

时间:2016-01-28 23:47:27

标签: jquery wordpress

我使用了一个名为layers的wordpress主题,它有自己的布局构建器,它使用自定义小部件向页面添加内容。

当用户第一次进入自定义程序时,我正在尝试为此开发用户入门插件。我想尝试的是当用户在步骤4中单击“下一步”(该按钮具有类.step4)时,在客户端中打开图层小部件。

我可以看到,在图层中有一个名为layers_expand_widget的函数,我试图绑定到点击事件。

这是layers_expand_widget函数的内容:

function layers_expand_widget( $widget_li, $widget, e ){

    // Instant user feedback
    $widget_li.addClass('layers-focussed');

    // Instantly remove other classes
    $('.layers-focussed').not( $widget_li ).removeClass('layers-focussed layers-loading');

    // Handle the first time Init of a widget.
    if ( !$widget_li.hasClass( 'layers-loading' ) && !$widget_li.hasClass( 'layers-initialized' ) ){

        $widget_li.addClass('layers-loading');
        $widget_li.addClass( 'layers-initialized' );

        if ( 'click' === e.type ) {
            // If event is 'click' it's our early invoked event so we can do things before all the WP things
            setTimeout(function(){
                $widget.trigger( 'layers-interface-init' );
            }, 50 );
        } else {
            // If event is 'expand' it's a WP invoked event that we use as backup if the 'click' was not used.
            // eg 'shift-click' on widget in customizer-preview
            $widget.trigger( 'layers-interface-init' );
        }
    }
}

这是我的脚本(在上面的代码之后加载)。

jQuery('.step4').on('click', function (e) {
    var $widget_li = $('#customize-control-widget_layers-widget-column-30');
    var $widget = $widget_li.find( '.widget' );
    layers_expand_widget( $widget_li, $widget, e );
});

目前我的剧本什么也没做,有什么东西显而易见我错过了吗?

更新:这是我的完整js代码:

jQuery(document).ready(function ($) {
  $('body').attr('onboarding_step', 'step1');
  $('body.wp-customizer').addClass('skizzar_onboarding');
  $('<div class="so_overlay"></div>').insertBefore('body.wp-customizer');

  $('.so_overlay').html('<div id="onboarding_steps_container" class="step1"></div>');
  $('#onboarding_steps_container').html('<div class="onboarding_steps"></div><div class="button_holder"><button id="next">NEXT</button><button id="prev">PREVIOUS</button></div>');

// here's the steps
 var steps = [
   "wp-content/plugins/skizzar-onboarding/ajax/step1.php",
   "wp-content/plugins/skizzar-onboarding/ajax/step2.php",
   "wp-content/plugins/skizzar-onboarding/ajax/step3.php",
   "wp-content/plugins/skizzar-onboarding/ajax/step4.php",
   "wp-content/plugins/skizzar-onboarding/ajax/step5.php",
 ];
 var classes = [
   "step1",
   "step2",
   "step3",
   "step4",
   "step5",
 ]
 counter = 0;
 $('.onboarding_steps').load(steps[counter]);
 $('#next').click(function () {
   counter = (counter + 1) % steps.length; 
   $('.onboarding_steps').load(steps[counter]); 
   $('#onboarding_steps_container, .button_holder button').attr('class', 'step' + (counter + 1)); 
   $('body').attr('onboarding_step', 'step' + (counter + 1)); 
 });

  $( 'button #next.step2' ).on("click", function(){
    alert('im here');
  });

});

0 个答案:

没有答案