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

使用$（this）.parent（）

而不是$（'。front'）

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

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

2 个答案: