0

jquery クリック イベントでいくつかの問題が発生しており、助けが必要です。

プラス記号の付いた画像があります。ユーザーがこのプラス記号をクリックすると、背景のテキスト div がフェードインします。テキスト div には十字があります。したがって、ユーザーが十字をクリックすると、テキスト div がフェードアウトし、画像がフェードインします。

ページにはこれらのボックスがいくつかありますが、コードの問題は、すべての div でフェード アクションをトリガーすることです。一度クリックしただけではありません。

ここに私のHTMLがあります。ポートフォリオ ブロックを作成するために、私のページにはこれらが複数あります。

<a class="flip-container">
    <div class="flip-container">
         <div class="flipper">
               <div class="front">
                    <div class="plus"></div>
                        <img src="img/portfolio.jpg" alt="Animation">
                        <h3>Project name</h3>
                </div>
                <div class="back">
                     <div class="cross"></div>
                     <p>Some text goes here.</p>
                      <p>by persons name</p>
                </div>
          </div>
     </div>

これが私のjQueryです：

$('.back').hide();
$('.flip-container .plus').click(function(e){    
    $('.front').fadeOut('slow', function(){
        $('.back').fadeIn('slow');
    });
});

$('.flip-container .cross').click(function(e){    
    $('.back').fadeOut('slow', function(){
        $('.front').fadeIn('slow');
    });
});
4

2 に答える 2

0

$('.front') の代わりに、$(this).parent() を使用します

.front はすべてのフロント クラスを選択します。これは、クリックされた要素を参照します。

于 2013-08-15T20:27:51.120 に答える
0

div クラスを使用しないでください。これを id で実行したい div を指定し、それに一致するように jQuery を変更してください。

于 2013-08-15T20:26:30.547 に答える