1

それで、いくつかのボタンとコンテンツを含むこのコードがあります。ボタンがクリックされたときに、div コンテナーを表示/非表示にしたい。ここに私が使用する HTML コードの一部を示します。

<li>
   <input type="button" id="hideshow" class="showhide1" value="hide/show">
   <div id="content" class="showhide1" style="display: none;">Hello World</div>
</li>
<li>
   <input type="button" id="hideshow" class="showhide2" value="hide/show">
   <div id="content" class="showhide2" style="display: none;">Hello World</div>
</li>
And it goes on like maybe a 100 times O.o...

そして、これが私が使用するjQueryです：

<script>
    jQuery(document).ready( function() {
         jQuery('#hideshow').live('click', function(event) {        
            jQuery('#content').toggle('hide');
         });
    });
</script>

このコードの種類は機能しますが、すべてのボタンの非表示/表示は最初のコンテンツ div のみです。私はすべて同じIDを持っているからだと思います。

しかし、私は異なるクラスを持っているので、クリックされたボタンのクラスを取得して、押されたボタンと同じクラスを持つdivのコンテンツを表示できるかどうか疑問に思っていました。これを行うことができますか、またはより良い方法がありますか?

4

3 に答える 3

1

まず第一に..いつものように、 IDは常に一意でなければなりません...代わりにクラスを使用してください..live()非推奨です使用on

ほとんどのコードを変更することなく。

<script>
 jQuery(document).ready(function(){
 jQuery('ul').on('click','.showhide1,.showhide2', function(event) {        
     jQuery(this).next().toggle('hide'); //<--using next()
});
});

次の代わりに兄弟または最も近いものを使用することもできます...

jQuery(this).siblings('.content').toggle('hide'); //<--using siblings()
jQuery(this).closest('.content').toggle('hide'); //<--using closest()

ただし、すべての要素に同じクラスを追加して、クラスセレクターを使用できます

  jQuery('ul').on('click','.elementsClass', function(event) {        
     jQuery(this).next().toggle('hide');
  });
于 2013-09-16T07:01:12.867 に答える
0 
<li>
<input type="button" id="hideshow" class="showhide" value="hide/show">
<div id="content" style="display: none;">Hello World</div>
</li>
<li>
<input type="button" id="hideshow" class="showhide" value="hide/show">
<div id="content" style="display: none;">Hello World</div>
</li>

そして、これがあなたが使うべきjQueryです：

<script>
    jQuery(document).ready(function(){
    jQuery('.showhide').on('click', function(event) {        
         $(this).next().toggle();
    });
    });
</script>
于 2013-09-16T07:10:33.870 に答える
0

jsFiddle デモ

まず、ID をクラスに変更する必要があります。これは、HTML では ID が一意であることを意図しているためです。

<li>
    <input type="button" class="hideshow showhide1" value="hide/show" />
    <div class="content showhide1" style="display: none;">Hello World</div>
</li>
<li>
    <input type="button" class="hideshow showhide2" value="hide/show" />
    <div class="content showhide2" style="display: none;">Hello World</div>
</li>

次に、兄弟であるコンテンツ div を選択できます。

jQuery(document).ready(function(){
    jQuery('.hideshow').on('click', function(event) {        
        jQuery(this).siblings(".content").toggle('hide');
    });
});
  • PS -.live()関数は jQuery 1.7 以降非推奨であり、jQuery 1.9 で削除されたことに注意してください。.on()代わりに使っています。
于 2013-09-16T06:59:33.197 に答える