jquery - 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).parent()

.front 选择所有前端类。这是指点击的元素。