0

クイズの次のボタンをクリックして次の質問に進むときに使用しているコードのブロックが下にあります。各.questionContainerdiv内には4つの可能な回答（入力ラジオボタン）があり、そのうち5つの質問に対して5つあります。

ユーザーが特定の質問番号をクリックして、その質問に直接移動できるようにしたい。コードの.next（）行は、次の質問と可能な回答に進むために正しく機能していますが、コメントアウトした行は機能しません。私は何が間違っているのですか？ありがとう

$('.btnNext').click(function(){
    $(this).parents('.questionContainer').fadeOut(500, function(){
        $(this).next().fadeIn(500);
    //$(this).eq(1).fadeIn(500);
    });

});
4

2 に答える 2

1

私は使用することをお勧めします：

$('.questionContainer').eq($(this).index()).fadeIn(500);

これは、次のように、それぞれが表示されるはずaの要素に対応する兄弟を持つ（または他の要素）をクリックしていることを前提としています。.questionContainer

<div id="wrapper">
    <div class="questionContainer">
        <!-- question one -->
    </div>
    <div class="questionContainer">
        <!-- question two -->
    </div>
    <div class="questionContainer">
        <!-- question three -->
    </div>
    <div class="questionContainer">
        <!-- question four -->
    </div>
    <div class="questionContainer">
        <!-- question five -->
    </div>
</div>

<div id="buttons">
    <a href="#">Question 1</a>
    <a href="#">Question 2</a>
    <a href="#">Question 3</a>
    <a href="#">Question 4</a>
    <a href="#">Question 5</a>
</div>

クリックしている要素が兄弟でない場合は、index()メソッドにセレクターを渡して正しいインデックスを見つけることができます。これは、クラス名、要素タイプ、親などに基づく任意の CSS タイプ セレクターにすることができます。

コードの最初の部分が機能しなかった、または機能しなかった理由は、(and ) が一度に 1 つの要素/DOM ノードしか参照できないため、( and ) には常に (の暗黙的なインデックスがある1 のセット内の最初で唯一の要素)。$(this)thisthis$(this)0

参考文献:

于 2012-04-09T17:47:31.863 に答える
0

$ で終わる任意の ID に一致するよう jQuery に指示するワイルドカード "$" を使用することもできます。質問の div ids = "q1" から "q5" を設定します。

  var q_nbr = 1 //create a variable in the global scope for the question number
  $(function() {
    $("#btnNext").click(
      function() {
        $("[id$=" + q_nbr + "]").fadeOut(500); // you may wish to omit this
        q_nbr++
        $("[id$=" + q_nbr + "]").fadeIn(500);
      }
    );
  });
于 2012-04-09T18:11:02.257 に答える