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>

现在，当我单击 .read-more.. 时，.audio h1 和 .sc-player 将开始动画.. 而且下一个 <section> 中的 .audio h1 和 .sc-player 也将开始动画..

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

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