8

質問をクリックすると回答が切り替わる FAQ ページを作成しています。問題はh3、答えはいくつかのp要素です。このような：

<h3>The First Question</h3>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>

<h3>The Second Question</h3>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>

p特定の質問に属するすべての要素を切り替えるにはどうすればよいですか? 私のJSpは、ページ上の次のすべての要素を切り替えます：

$(document).ready(function(){
    $("p").hide();
    $("h3").click(function(){
        $(this).nextAll("p").toggle();
    });
});

divやクラスは使用できません)。

4

4 に答える 4

16

これを行う最善の方法は、 each を使用して、反復を停止する必要がある次の要素に到達するまで反復することです。each 中に false を返すと、反復が停止します。フィルターを使用すると、反復内の要素の型を確認し、適切に応答できます。

$(function() {
   $("p").hide();
   $("h3").click(function() {
       $(this).nextAll().each( function() {
           if ($(this).filter('h3').length) {
              return false;
           }
           $(this).filter('p').toggle();
       });
   });
});
于 2009-07-03T16:02:34.980 に答える
8

私はこのようにします：

$(function() {
  $("p").hide();
  $("h3").click(function() {
    $(this).nextAll().each(function() {
      if ($(this).is('h3')) {
        return false;
      }
      $(this).toggle();
    });
  });
});

each() から false を返すと、チェーンが終了します。

可能であれば、このシナリオを処理するためにデータをより適切に構造化することもお勧めします。例えば：

<h3 class="question">Why is there no soup for me?</h3>
<div class="answer">
<p>...</p>
<p>...</p>
<p>...</p>
</div>

そして、問題は解決するのが簡単になります:

$(function() {
  $("div.answer").hide();
  $("h3.question").click(function() {
    $(this).next().toggle();
  });
});
于 2009-07-03T16:00:20.057 に答える
1

.each() を使用しない興味深いソリューションを次に示します。

$("h3").click(function() {

    var idx = $("h3,p").index(this);
    var nextIdx = ($("h3,p").index($(this).nextAll("h3")));
    var nextPs = (nextIdx == -1) ? $("h3,p").length - idx : nextIdx - idx;
    $(this).nextAll("p:lt(" + (nextPs - 1) + ")").toggle();

});

次の P をインデックスで探しています。これがどれほど実用的かはわかりませんが、良い練習になりました。

于 2009-07-03T17:16:16.883 に答える