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

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

1 个答案: