jQueryを使用して特定のクラスのターゲットイメージを表示しますか？

Question

ボタンをクリックすると、my-imageの最初の画像にいくつかのjQuery（fadeOut）を適用したいと思います。

私はもう一度そのボタンをクリックすると、私はクラス私-画像と画像のマークアップに次発生に同じことをしたいです。

画像はすべて、マークアップ全体のさまざまな場所に表示され、必ずしも兄弟ではありません。

ありがとうございました。

Answer 1

テストされていないけれども、あなたは見えと最初擬似セレクターの利点を取ることができます。

$('#mybutton').click(function(){ 
    $('.my-image:visible:first').fadeOut(); 
} 

あなたの関数は、現在のフェージングあなたが1と一致していないことを確認するためにをアニメーションないとを使用アニメート1の場合：

$('#mybutton').click(function(){ 
    $('.my-image:visible:not(:animated):first').fadeOut(); 
}) 

フィルタ方法の我々の理解を絞り込むことが、私はちょうど長い手をテストしました。

$('#mybutton').click(function(){ 
    $('.my-image') 
    .filter(':visible') 
    .not(':animated') 
    .filter(':first') 
    .fadeOut(); 
}) 

これはすぐに様々なステップをコメントアウトするために開発中に特に便利です。

$('#mybutton').click(function(){ 
    $('.my-image') 
    .filter(':visible') 
// .not(':animated') 
    .filter(':first') 
    .fadeOut(); 
}) 

Answer 2

あなたは2つのクラスを持つことができます。 1つはすでに退色していた画像用で、もう1つはそうでなかった画像用です。同様に：

<img src="" alt="" class="not_faded" /> 

とjQueryを使って今

<img src="" alt="" class="faded" /> 

は、次の操作を実行できます

$('#mybutton').click (function(){ 
    $('.not_faded:first').fadeOut(); // your fade out effect 
    $('.not_faded:first').attr ('class', 'faded'); 
}); 

このコードは、not_fadedクラスを属し、効果をフェードアウトを作る最初の画像を取得します。次に、その画像のクラスを「退色」に変更します。したがって、not_fadedクラスの最初のイメージは、次回は2番目のイメージになります。

編集：Mattのソリューションをチェックしてください。より洗練されており、jQueryを最大限に活用しています。