4

我有这个向导步骤表单，我通过将非活动项目与绝对定位<ul>重叠来模拟列表项目。<li>

除了我想在某个步骤上隐藏下一个或上一个按钮之外，向导表单正在按需要工作。

这是我在 jQuery 中的逻辑，但它没有任何好处。

if (index === 0) {
    $('#prev').addClass(invisible);
    $('#prev').removeClass(visible);
} else if (index === 1) {
    $('#prev').addClass(visible);
    $('#prev').removeClass(invisible);
} else {
   $('#next').addClass(invisible);
}

为了获取我使用的索引值，eq()链接在当前步骤元素上，如下所示

var current;
var index = 0; 

$(function () {
   current = $('.pg-wrapper').find('.current');

$('#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();
   index = current.eq();
});

我试图尽可能地隔离它，但我的完整代码会给你一个更好的主意。如果您愿意提供帮助，请查看我的JS BIN

4

5 回答 5

2

有几个问题

  1. 您使用 .eq 而不是索引
  2. 你在类名周围缺少引号
  3. 你的导航逻辑有缺陷
  4. 不需要有两个类来改变可见性

我相信以下是一种改进，但如果您有任何问题，请告诉我。

我将 class="navBut" 添加到 prev/next 并重写了可见性的设置

Live Demo

var current;
var navstep;

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

  $('.navBut').on('click', function() {
    var next = this.id=="next";  
    if (next) { 
      if (current.next().length===0) return;
      current.next().addClass('current').show();
      navstep.next().addClass('active');
    }    
    else {
      if (current.prev().length===0) return;
      current.prev().addClass('current').show();
      navstep.prev().addClass('active');
    }  
    current.removeClass('current').hide();
    navstep.removeClass('active');
    current = (next)?current.next():current.prev();
    navstep = (next)?navstep.next():navstep.prev();
    setBut(current);
  });
});

function setBut(current) {
  var index=current.index();
  var max = current.parent().children().length-1;
  $('#prev').toggleClass("invisible",index<1);
  $('#next').toggleClass("invisible",index>=max);
}
于 2013-09-25T05:45:42.587 回答
1

该eq函数不会为您提供索引，因为您需要使用index()函数。

于 2013-09-25T05:40:37.660 回答
0

您应该进行 4 次修改。

1) 使用 .index() 代替 .eq()；

2）添加一个changeIndex根据索引更改类的函数，并在单击上一个和下一个时调用它。

3）添加引号到不可见和可见

4）您的逻辑存在错误，请尝试进入第 3 步并返回第 1 步。两个按钮都会消失。因此，如果 index = 0，您必须使下一个按钮可见

这是演示：http: //jsfiddle.net/ChaitanyaMunipalle/9SzWB/

于 2013-09-25T05:48:35.063 回答
0

使用 index() 函数而不是 eq() 因为 eq() 将返回对象， index() 将返回整数值。

在这里演示

var current;
var navstep;
var index = 0;

$(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();
  index = current.index();
  change_step(index)
});

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

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

  current = current.prev();
  navstep = navstep.prev();
  index = current.index();
  change_step(index)
});

function change_step(value)
{
    if (value === 0) {
        $('#prev').hide();
        $('#next').show();
    } else if (value === 1) {
        $('#prev').show();
        $('#next').show();
    } else {
       $('#next').hide();
       $('#prev').show();
    }
}
于 2013-09-25T06:17:46.597 回答
0

我没有看过整个代码，但你的班级分配不应该是这样的：

$('#prev').addClass('invisible');
$('#prev').removeClass('visible');

即在类名周围加上引号？真的有必要上课visible吗？分配和删除类invisible应该很容易完成（前提是已为该类设置了正确的样式）。

于 2013-09-25T05:39:39.820 回答