Question

我有这个向导步骤表单，我通过重叠非活动<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

Answer 1

有几个问题

您使用的是.eq而不是索引
你错过了班级名称的引号
您的导航逻辑存在缺陷
无需更改两个类来更改可见性

我相信以下是一项改进，但如果您有疑问，请与我联系。

我将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);
}

Answer 2

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

Answer 3

我没有查看整个代码，但不应该是你的班级助手：

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

即。有关类名的引号？是否真的有必要上课visible？分配和删除类invisible应该可以轻松完成工作（前提是已为此类设置了正确的样式）。

Answer 4

你应该进行4次修改。

1）使用.index（）代替.eq（）;

2）添加一个函数changeIndex，它改变了类取决于索引，并在点击prev和next时调用它。

3）为不可见和可见

添加引号

4）你的逻辑中有一个错误，尝试进入第3步并回到第1步。两个按钮都会消失。因此，如果index = 0

，则必须使下一个按钮可见

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

Answer 5

使用index（）函数代替eq（），因为eq（）将返回object，而index（）将返回整数值。

DEMO HERE

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

jQuery - 在某个页面上隐藏元素

5 个答案: