0

使用 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');
    });
});
4

3 回答 3

0 
var blocks = $('.div1, .div2, .div3');
$('button').click(function () {
    if (block = blocks.next())
        block.show('slow');
});
于 2013-10-29T19:10:05.557 回答
0

它们同时出现的原因是因为您现在所做的是将三个单独的单击处理程序附加到同一个对象，每个对象都显示在一个单独的 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 fiddle 的工作示例：http: //jsfiddle.net/grammar/76arV/

希望这可以帮助！

于 2013-10-29T19:15:42.457 回答
0

那这个呢？

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

所以在这个例子中，我给了你想与按钮交互的每个元素类.show。这样您就可以通过索引值选择这些元素中的任何一个，您可以使用.eq()来执行此操作。
第一个.show元素的索引值为 0，所以这是我们开始的地方（我们的默认值）。每次单击时，我们都会将变量增加一，因此单击下一个，将显示下一个元素。


根据您接下来要执行的操作，您可以通过再次隐藏所有元素来执行相同操作。希望这对您有所帮助。

jsFiddle

于 2013-10-29T19:48:59.157 回答