jQueryを使用して複数回ショーを表示する

Question

私は、以下のコードを使用して、最小化アイコンをクリックすると展開アイコンに置き換えています。

$(document).ready(function(){ 
    $("#expand").click(function(){ 
    $(".expandicon").hide(); 
    $(".shrinkicon").show(); 
    }); 
    $("#shrink").click(function(){ 
    $(".expandicon").show(); 
    $(".shrinkicon").hide(); 
    }); 
}); 

唯一の問題は、一度しか使用できないことです（最初のインスタンス、次に2番目のアイコンは変更されないなど）。私は5つのテーブルを1つのページに持つので、これを5回使用する必要があります。どのようにそれを行うにはどのようなアイデア？私はjQueryは言うまでもなく、Web開発ではかなり新しいです。どんな助けでも大歓迎です。前もって感謝します！

[EDIT]ここに私のHTMLコードは次のとおりです。*

<span class="expandicon" style="display:none;"> 
    <a class="flip"> 
    <img id="expand" src="img/expand1.png" /> 
    </a> 
</span> 
<span class="shrinkicon"> 
    <a class="flip"> 
    <img id="shrink" src="img/shrink1.png" /> 
    </a> 
</span> 

ではなく、クラスとidを置き換えます。私はそれに悪い。

Answer 1

あなたは、クラス= 'expandicon'

でページ内のすべての要素を隠し、

$(".shrinkicon").show(); 

でクラス= 'shrinkicon' を持つすべての要素が示されています。

selectorsをご覧ください。あなたのケースでは

、これを試してみてください。

HTML：

<span class="expandicon" style="display:none;"> expand 1 </span> 
<span class="shrinkicon"> shrink 1 </span> 
<br/> 
<span class="expandicon" style="display:none;"> expand 2 </span> 
<span class="shrinkicon"> shrink 2</span> 

JS：

$(function(){ 
    $('span.expandicon').click(function(){ 
     $(this).toggle().next('span.shrinkicon').toggle();  
    }); 
    $('span.shrinkicon').click(function(){ 
     $(this).toggle().prev('span.expandicon').toggle();   
    }); 
}); 

あなたはhere

Answer 2

私たちは、HTMLコードなしでずっとあなたを助けるが、ここではいくつかのヒントがありません。あなたがする必要がある場合は、動的に以前の状態

に応じて、要素を非表示に.toggle()方法/ショーを使用することができます

• （IDがあることを覚えてユニーク）あなたがより良いクラス代わりのIDSを使用すると思い、いくつかの要素に同じイベントを適用

ここでは210

[EDIT]の例です：http://jsfiddle.net/SShK6/

のように[EDIT 2]ここでは、あなたのHTMLとの例である：あなたが背景として画像を設定するためにCSSを使用することができますhttp://jsfiddle.net/ux8Nw/

Answer 3

。クラスを縮小して作成するよりも、toggleClass()（http://api.jquery.com/toggleClass/）をクリックすると切り替えることができます。

$(".expandicon").hide(); 

で