0

各項目をクリックすると、対応する div の表示/非表示を切り替える順序付きリストがありますが、最適な方法でこれを行う方法が本当にわかりません。各アイテムに id またはクラスを指定する方法は知っていますが、リストが大きい場合は、行とコードの行を記述するよりも良い方法があると確信しています。

基本的に私が持っているのはこれです：

<ol>
  <li id="no1">Money Savings</li>
  <p id="reasonText">
  Some text....
</p>
  <li>Stable Fares</li>
  <p id="reasonText2">
  Some text...</p>
<li>Reason 3</li>
<p id="reasonText3">Some text...</p>

等....

JQuery:

 $("#no1").click(function(){
     $("#reasonText").slideToggle('slow')

基本的にjqueryにあるものを繰り返す以外に、各liを反復処理して、それに続くdivを表示または非表示にするより良い方法はありますか?

4

2 に答える 2

1

これを行うには、ID の代わりにすべてのクラスを使用する方が適切です。

<ol>
  <li class="reason">Money Savings <p class="reasonText">Some text....</p></li>
  <li class="reason">Stable Fares <p class="reasonText">Some text...</p></li>
  <li class="reason">Reason 3 <p class="reasonText">Some text...</p></li>
</ol>

jQuery は次のようになります。

$('.reasonText').hide(); //hide all the reason text
$('.reason').on('click', function() {
  $(this).children('.reasonText').slideToggle('slow');
});

http://jsfiddle.net/XtUFn/

<p>タグにはタグしか表示でき<li>ないため、タグをタグに移動しました。IDをクラスに変更することを除いて、マークアップを保持したい場合。<li><ol>

<ol>
  <li class="reason">Money Savings</li>
  <p class="reasonText">Some text....</p>
  <li class="reason">Stable Fares</li>
  <p class="reasonText">Some text...</p>
  <li class="reason">Reason 3</li>
  <p class="reasonText">Some text...</p>
</ol>​

jQuery は次のようになります。

$('.reasonText').hide(); //hide all the reason text
$('.reason').on('click', function() {
  $(this).next('.reasonText').slideToggle('slow');
});​

http://jsfiddle.net/XtUFn/1/

于 2012-12-02T01:58:34.090 に答える
1

ここで例を見つけることができます：

<script>
$(document).ready(function() {
    $("li").click(function(){
     $(this).find("p").slideToggle('slow');
          });
    });
</script>
于 2012-12-02T02:03:47.383 に答える