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的当前步骤子项并使用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

jQuery - 多步向导表单

1 个答案: