具有相同名称的jquery多个按钮触发多个具有相同名称的类的事件

Question

我在解决某个事件时遇到了一些问题。

我有这个按钮叫：.read-more它说..当点击.read-more - >.audio h1做这个事件和.sc-player做这个事件。这一工程.. 但现在所有.audio h1和所有的.sc-player类网页上也在做着同样的事件

的jQuery：

$(".read-more").click(function(event) { 
    $('.audio h1').transition({ y: -150, delay: 400 }, 600, 'easeInOutQuint'); 
    $('.sc-player').transition({ y: 200, delay: 700 }, 600, 'easeInOutQuint'); 
}); 

所以我的HTML看起来像这样

<section class="scrollsections"> 
     <div class="content"> 
      <div class="audio"> 
       <h1>name</h1> 
       <div class="sc-player"> 
         <a href="https://soundcloud.com/qviotky/daft-punk-get-lucky-qviotky"></a> 
       </div> 
       <a class="read-more">Read more</a> 
      </div> 

     </div> 

     <div class="overlay"></div> 

</section> 


<section class="scrollsections"> 
     <div class="content"> 
      <div class="audio"> 
       <h1>name</h1> 
       <div class="sc-player"> 
         <a href="https://soundcloud.com/ferrarifatts/14-choppa-feat-a-ap-rocky"></a> 
       </div> 
       <a class="read-more">Read more</a> 
      </div> 

     </div> 

     <div class="overlay"></div> 

</section> 

现在当我点击阅读更多..音频h1和.sc播放器将开始动画..而且在下一个<section>的.audio h1和.sc播放器是动画..

有没有一种方法可以为该特定部分添加事件？

Answer 1

您需要在同一节搜索：男人

$(".read-more").click(function(event) { 
    var section = $(this).closest('.scrollsections'); 
    $('.audio h1', section).transition({ y: -150, delay: 400 }, 600, 'easeInOutQuint'); 
    $('.sc-player', section).transition({ y: 200, delay: 700 }, 600, 'easeInOutQuint'); 
});