Question

我正在构建一个wordpress onboarding插件。

我有一个数组，其中包含每个入门过程步骤的内容，然后是一个函数，它输出自己的容器中的每个步骤，并使用它自己的类：

static function action_build_steps() {
    $items = Onboarding_Dashboard::dashboard_onboarding_content();
    $output = '';
    foreach ($items as $step => $item) {

        // Classes
        $step_class = array();
        $step_class[] = str_replace("-", "", $step);
        $step_class[] = (isset($item['class']) ? $item['class'] : NULL);
        $step_class = implode( ' ', $step_class  );

        echo '<div id="onboarding_steps_container" class="'.$step_class.' onboarding-'.Onboarding_Setup::onboarding_slug().'" style="left:'.$item['left'].'; top:'.$item['top'].'; width:'.$item['width'].';">';
        echo '<div class="onboarding_steps">';
        echo '<h2>'.$item['title'].'</h2>';
        echo '<p>'.$item['content'].'</p>';
        if(isset($item['css_arrow'])) {
        echo '<div class="arrow_'.$item['css_arrow'].'"></div>';
        }
        echo '</div>';
        echo '<div class="button_holder">';
        if (($item['show-prev'])=='true') {
        echo '<button id="prev" class="'.$step_class.'"><i class="fa fa-chevron-left"></i> PREV</button>';
        }
        if(($item['show-next'])=='true') {
        echo '<button onboarding_stage="dashboard" id="next" class="'.$step_class.'">NEXT <i class="fa fa-chevron-right"></i></button>'; 
        }
        echo '</div>';
        echo '</div>';
    }

    return $output;
}

这导致一次显示所有步骤，但是，计划是一次显示一个步骤，当用户单击“下一步”或“上一步”时，他们会看到下一步或上一步。

我知道我需要使用jQuery来做这件事，但不能想我会怎么做，主要是因为我有一些动态的步骤 - 它不是一个固定的数字。

到目前为止，我刚刚使用此脚本隐藏了所有步骤：

jQuery(function($) {
    $('.onboarding-<?php echo Onboarding_Setup::onboarding_slug(); ?>').hide();

    });

我输出的html看起来有点像这样（我会把内容拿出来）

<div id="onboarding_steps_container" class="step1  onboarding-dashboard" style="left:50%; top:320px; width:500px;">

    <div class="button_holder">
        <button onboarding_stage="dashboard" id="prev" class="step1 ">NEXT <i class="fa fa-chevron-right"></i></button>
        <button onboarding_stage="dashboard" id="next" class="step1 ">NEXT <i class="fa fa-chevron-right"></i></button>
    </div>
</div>

<div id="onboarding_steps_container" class="step2 onboarding-dashboard" style="left:50%; top:320px; width:500px;">

    <div class="button_holder">
        <button onboarding_stage="dashboard" id="prev" class="step2 ">NEXT <i class="fa fa-chevron-right"></i></button>
        <button onboarding_stage="dashboard" id="next" class="step2 ">NEXT <i class="fa fa-chevron-right"></i></button>
    </div>
</div>

如果您在上面的脚本中看到“仪表板”一词，则会根据用户所在的页面动态添加。此外，第一步没有前一个按钮，最后一步没有下一个按钮（它们在我上面的代码中，但仅用于演示）

我如何迭代每个步骤，一次一个，隐藏上一步，然后显示下一步？

更新：到目前为止，我已经设法提出了这个问题：

jQuery(function($) {
            var index = 0;
$(function() {
  $('.onboarding_steps_container:not(:first)').hide();
  $('#next').click(function() {
    if (($('.onboarding_steps_container').length - 1) >= index) {
      $('.onboarding_steps_container:eq(' + index + ')').hide();
      index++;
  $('.onboarding_steps_container:eq(' + index + ')').show();
  }
});
$('#prev').click(function() {
if (index != 0) {
  $('.onboarding_steps_container:eq(' + index + ')').hide();
  index--;
  $('.onboarding_steps_container:eq(' + index + ')').show();
}
});
});

我认为我的问题是每个步骤都有一个不同的按钮（即使我的脚本中引用的ID相同） }）;

但是，这仅适用于第一次按键点击，没有其他按钮

这是一个JSFiddle显示我的情况： https://jsfiddle.net/fwysy2rr/

Answer 1

在javascript调用中创建一个函数onclick on next btn

var current_div =1; 

function showDiv(var i){
 //first hide all div having class  onboarding-

//show next div
$(".step"+current_div+1 + "onboarding-dashboard");

//set current div 
current_div +=1 ;


}

jQuery循环遍历一组div，一次一个

1 个答案: