0

我有一个简单的向导表单，可以浏览各个步骤。我知道那里有很多插件，但我只是想自己制作。

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

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

4

1 回答 1

0

您的代码有一些问题：

  • 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

于 2013-09-07T12:24:42.470 回答