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