CODEWITHSUNDEEP
jqueryclasseventsclick
aeon
aeon

Reputation: 3

Jquery mulitple buttons with same name triggers event for multiple classes with same name

I'm having some problems firing an event.

I have this button called: .read-more and it says.. when clicked .read-more--> .audio h1 do this event and .sc-player do this event. That works.. but now all .audio h1 and all the .sc-player classes on the page are doing the same event

jquery:

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

so my html looks something like this

<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>

Now when i click .read-more.. the .audio h1 and .sc-player will start animating.. but also the .audio h1 and .sc-player in the next <section> are animated..

Is there a way i can add the event for just that particular section?

Upvotes: 0

Views: 1055

Answers (1)

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382122

You need to search in the same section :

$(".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');
});

Upvotes: 1

Related Questions