jquery - 具有相同名称的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 将开始动画.. 而且接下来的 .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');
});