如何让一个按钮在每次点击时显示不同的隐藏 div？答案

【问题标题】：How can I get one button to reveal different hidden divs with each click?如何让一个按钮在每次点击时显示不同的隐藏 div？
【发布时间】：2013-10-29 19:04:44
【问题描述】：

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

【问题讨论】：

您如何区分按钮？看起来所有三个功能都连接到同一个对象“按钮”
HTML 是什么样的？
@jhocking 他想使用相同的按钮，但点击时他希望 div 根据他点击的次数按顺序显示
开玩笑，我试图只使用一个按钮来触发所有这些单独的事件，这就是我遇到未知领域的原因！
@JenCalloway 如果它解决了您的问题，您应该接受其中一个答案。如果没有，请对答案提供反馈。

标签： javascript jquery

【解决方案1】：

它们同时出现的原因是因为您现在所做的是将三个单独的单击处理程序附加到同一个对象，每个对象都显示在一个单独的 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/

希望这会有所帮助！

【讨论】：

【解决方案2】：

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

【讨论】：

@JenCalloway，对不起，我意识到 jquery .next() 做了一些与我想要的不同的事情。数组没有核心 next() 。如此简单的for 方式，比如语法，我认为是最有效的。

【解决方案3】：

这个怎么样？

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

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

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

jsFiddle

【讨论】：