jquery隱藏/使用相同的按鈕顯示多個div

Question

我正在做一些使用jQuery的動態測驗。我目前堅持使用相同的按鈕隱藏/顯示div。因此，舉例來說，我有這樣的HTML：

<div id="div1" class="question"> 
<div id="div2" class="question"> 
<div id="div3" class="question"> 
<div id="div4" class="question"> 
<div id="div5" class="question"> 

<button type="button" onclick="GetSelectedItem()" id="next">Next</button> 

這是jQuery的部分：

$(document).ready(function(){ 

$('#div2, #div3, #div4, #div5').hide(); 
$('#next').click(function(){ 
    //code 
}); 
}); 

使用「#next」按鈕，我想經過的每個格，所以當我按它它會隱藏前面的div並顯示下一個等等。任何人都可以將我指向正確的方向嗎？由於

Answer 1

你可以嘗試這樣的事情（假設你所有的問題有一個類的question，沒有別的一樣）：

$('#next').click(function(){ 
    var curr = $(".question:visible"); 
    curr.next(".question").show(); 
    curr.hide(); 
}); 

見here

注您可以檢查next()返回的值處理測驗的結束。

下面是一個example，當您到達最後一個問題時禁用下一個按鈕。

Answer 2

首先，你必須在你的HTML錯誤，你是不關閉的div

這應該開始你出去：

http://jsfiddle.net/crZ69/

HTML

<div id="div1" class="question">q1</div> 
<div id="div2" class="question">q2</div> 
<div id="div3" class="question">q3</div> 
<div id="div4" class="question">q4</div> 
<div id="div5" class="question">q5</div> 

<button type="button" onclick="GetSelectedItem()" id="next">Next</button> 

JQUERY

var qCount = 1; 

$('.question').hide(); 

$('#next').click(function(){ 
    $('.question').hide(); 
    $('#div' + qCount).show() ; 
    qCount = qCount + 1; 

    if(qCount == 6){ qCount = 1;} 
}); 

Answer 3

您可以創建一個索引來跟蹤打開的div，並在您單擊按鈕時將其增加，隱藏所有div，然後僅顯示「下一個」。

$('#div2, #div3, #div4, #div5').hide(); 
var idx = 0; 
$('#next').click(function() { 
    idx++; 
    if (idx < $('.question').length) $('.question').hide(); 
    $('.question').eq(idx).show(); 
}); 

jsFiddle example

Answer 4

這將使用current CSS類保持能見度目的當前問題的跟蹤和收拾的HTML有點用unobtrustive使用Javascript - http://jsfiddle.net/ZqTsv/

HTML：

<div id="div1" class="question current">Question 1</div> 
<div id="div2" class="question">Question 2</div> 
<div id="div3" class="question">Question 3</div> 
<div id="div4" class="question">Question 4</div> 
<div id="div5" class="question">Question 5</div> 

<button type="button" id="next">Next</button> 

CSS：

.question { 
    display: none; 
} 

.question.current { 
    display: block; 
} 

jQuery：

$("#next").click(function() { 
    if ($(".current").next(".question").length) { 
     $(".current").removeClass("current").next(".question").addClass("current");  
    }  
}); 

Answer 5

令人驚訝的是，不同的人提出了多少種不同的解決方案。這裏是我的：

首先修復你的html，所以divs有內容。

這是我提出的javascript：

var idx = 0; 
$(document).ready(function(){ 
    var qs = $('.question'); 
    qs.hide(); 
    qs.first().show(); 
    $('#next').click(function(){ 
     idx++; 
     if(idx >= qs.length) idx = 0; 
     qs.hide(); 
     qs.eq(idx).show(); 
    }); 
}); 

Fiddle

Answer 6

I did something

我認爲這將是有益的給你=）