Question

使用jQuery（或javascript），如何让每个点击一个按钮显示不同的隐藏（display：none）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

如何通过每次点击获得一个按钮来显示不同的隐藏div？

3 个答案: