jQuery-多步骤向导形式

Question

我有一个简单的向导表单，可逐步浏览。 我知道那里有很多插件，但我只想自己动手。

我的>>按钮有问题，该按钮应该显示下一步。

var current = $('.pg-wrapper div').hasClass('current');
var index = $('.pg-wrapper').index(current);

$(function () {
  $('.pg-wrapper div').not('.current').hide();
}(jQuery));


$('#next').on('click', function() {
  current.next().addClass('current');
  current.removeClass('current');
});

这是完整的示例JS BIN

Answer 1

您的代码有一些问题：

• hasClass：返回一个布尔值，并告诉您选择器是否具有一个类
• 指数：没用
• 在您的下次点击功能中，您正在更改类，但未切换可见性
• 步骤栏未处理

使用此代码似乎可以正常工作； 检查find('.current')的使用，获取.pg-wrapper的当前步骤子.pg-wrapper以及使用next在同级之间移动。

码：

var current;
var navstep;
$(function () {
   current = $('.pg-wrapper').find('.current');
  navstep=$('.nav-step').find('.active');
  $('.pg-wrapper div').not(current).hide();
}(jQuery));


$('#next').on('click', function() {
  if (current.next().length==0) return
  current.next().addClass('current').show();
  current.removeClass('current').hide();

    navstep.next().addClass('active');
  navstep.removeClass('active');

 current = current.next();
  navstep=navstep.next();
});

演示： http ： //jsbin.com/oxamOBA/1/edit