Javascript jQuery通过一组div循环，一次一个

我正在构建一个wordpress插件

我有一个数组，其中包含入职流程每个步骤的内容，然后有一个函数，该函数使用自己的类在自己的容器中输出每个步骤：

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;
}

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

但是，这只适用于第一次单击按钮，而不适用于其他按钮

下面是一个JSFIDLE，显示了我的情况：

---

在下一个btn上单击一次javascript调用时生成一个函数

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 ;


}

---

无法让这个想法发挥作用-我用最新的代码在我的描述中添加了一个JSFIDLE，hii在你的FIDLE中修改了一些代码，现在可以用于下一个btn呼叫，希望你不知道该做什么，以及如何做如果新更新的FIDLE做你想做的事情，请选择我的答案。啊哈，明白了，只需将我的selectro更改为button#next和button#prev

<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();
}
});
});

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 ;


}