2

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 が非表示になり、次の div が表示されます。誰かが私を正しい方向に向けることができますか? ありがとう

4

6 に答える 6

3

次のようなことを試すことができます（すべての質問にクラスがquestionあり、他に何もないと仮定します）：

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

こちらをご覧ください

next()によって返される値を確認して、クイズの終了を処理できることに注意してください。

最後の質問に到達したときに次へボタンを無効にする例を次に示します。

于 2013-03-18T15:41:27.757 に答える
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>

Jクエリ

var qCount = 1;

$('.question').hide();

$('#next').click(function(){
    $('.question').hide();
    $('#div' + qCount).show() ;   
    qCount = qCount + 1;

    if(qCount == 6){ qCount = 1;}
});
于 2013-03-18T15:39:02.770 に答える
2

インデックスを作成して、開いている 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 の例

于 2013-03-18T15:39:08.420 に答える
1

これは、current可視性の目的で現在の質問を追跡するために CSS クラスを使用し、目立たない Javascript を使用するために HTML を少し整理します - 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");     
    }    
});
于 2013-03-18T15:45:52.623 に答える
0

私は何かをしました

私はそれがあなたに役立つと思います=）

于 2013-03-18T16:16:52.190 に答える
0

さまざまな人が思いつくさまざまなソリューションの数には驚かされます。これが私のものです：

最初に 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();
    });
});

フィドル

于 2013-03-18T16:12:30.017 に答える