Jquery 使用同一个按钮隐藏/显示多个 div答案

【问题标题】：Jquery hide/show multiple divs using the same buttonJquery 使用同一个按钮隐藏/显示多个 div
【发布时间】：2013-03-18 15:33:43
【问题描述】：

我正在使用 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，所以当我按下它时，它会隐藏上一个 div 并显示下一个，依此类推。谁能指出我正确的方向？谢谢

【问题讨论】：

标签： jquery

【解决方案1】：

你可以尝试这样的事情（假设你所有的问题都属于question，而没有其他问题）：

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

见here

请注意，您可以检查 next() 返回的值来处理测验的结束。

这是一个example，当您到达最后一个问题时，它会禁用下一个按钮。

【讨论】：

使用 jQuery \o/ 解决问题的方法之多令人惊讶

【解决方案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;}
});

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

这使用current CSS 类来跟踪当前问题以实现可见性，并稍微整理 HTML 以使用不引人注目的 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");     
    }    
});

【讨论】：

【解决方案5】：

令人惊讶的是，不同的人想出了多少不同的解决方案。这是我的：

首先修复你的 html，让 div 有内容。

这是我建议的 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

【讨论】：

【解决方案6】：

I did something

我觉得对你有用=)

【讨论】：