如何獲得一個按鈕來顯示每次單擊時不同的隱藏div？

Question

使用jQuery（或javascript），我如何才能使一個按鈕每次單擊顯示不同的隱藏（顯示：無）div？ 例如，在按鈕的第一次單擊上，應顯示div1。 在同一按鈕的第二次單擊上，div2也將出現（因此div1和div2都可見）。 與div3等相同

使用我現在擁有的代碼，單擊第一個按鈕一次即可顯示所有隱藏的div。 這是一個例子：

$(document).ready(function () {
    $('button').click(function () {
        $('.div1').show('slow');
    });
    $('button').click(function () {
        $('.div2').show('slow');
    });
    $('button').click(function () {
        $('.div3').show('slow');
    });
});

Answer 1

var blocks = $('.div1, .div2, .div3');
$('button').click(function () {
    if (block = blocks.next())
        block.show('slow');
});

Answer 2

它們全部一次出現的原因是因為您現在所做的是在同一個對象上附加了三個單獨的單擊處理程序，每個單擊處理程序在單獨的div中顯示。 現在，每次您單擊“按鈕”時，所有這三個功能都將運行。

您可以做的是將要顯示在一個對象中的所有div收集起來，並對已經顯示的div數量進行計數。

var count = 0,
    $allDivs = $('.div1, .div2, .div3');

$('.button').click( function() {
    if( count < $allDivs.length - 1 ) {
        $allDivs.eq( count ).show( 'slow' );
        count++;
    }
});

如果您一次選擇所有div，則可以使用jQuery的eq()方法來一次選擇它們。

這是有關JS小提琴的工作示例： http : //jsfiddle.net/grammar/76arV/

希望這可以幫助！

Answer 3

那這個呢？

var iShow = 0;
$('button').click(function () {
    $('.show:eq(' + iShow + ')').show('slow');
    iShow = iShow + 1;
});

因此，在此示例中，我為您希望與按鈕進行交互的每個元素.show類。 這樣，您可以通過.eq（）通過索引值選擇這些元素中的任何一個。
第一個.show元素的索引值為0，所以我們從這里開始（我們的默認值）。 每次單擊時，變量都會增加一個，因此單擊下一步，將顯示下一個元素。

根據下一步要執行的操作，可以再次隱藏所有元素來完成相同的操作。 希望這對您有所幫助。

jsFiddle