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

Question

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

向导形式正在工作，期望不同的是我想隐藏在某步骤下或以前按钮。

这是我在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. 没有必要有两个班报价改变能见度

我相信以下是一个改进，但让我知道如果你有问题。

我添加类= “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); 
} 

Answer 2

我没有看过整个代码，但不应该你的类assignemnts样子：

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

即与周围的类名引号？是否真的有必要有一个类visible？分配和删除类invisible应该很容易完成这项工作（只要为这个类设置了正确的样式）。

Answer 3

eq函数不会给你索引，因为你需要使用index()函数。

Answer 4

你应该让4次修改的设置。

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

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

3）报价添加到无形和有形

4）。在你的逻辑错误，请尝试第3步，回到第1步。两个按钮都会消失。所以，你必须做出一个按钮可见，如果指数= 0

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

Answer 5

利用指数（）函数，而不是EQ（），因为EQ（）将返回对象和索引（）将返回整数值。

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