javascript - jQuery - 在特定页面上隐藏元素

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

有几个问题

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

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

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

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