jquery on click事件处理具有相同类的所有div

Question

我在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');
    });
});

Answer 1

不要使用div类来指定您希望在id上发生的div，并更改jQuery以匹配它。

Answer 2

不要使用$（'.front'），而是使用$（this）.Pparent（）

.front选择所有front类。这是指单击的元素。