Кнопки Julery Mulitple с одинаковым именем запускают событие для нескольких классов с одинаковым именем

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> 

сейчас когда я нажимаю .read-more .. .audio h1 и .sc-player начнут анимацию .., но также будут активированы .audio h1 и .sc-player в следующем <section>.

Есть ли способ добавить событие только для этого раздела?

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