Hello!!!

There is this HTML code:

<div class="wrapper"> <figure class="effect"> <img src="img"/> <figcaption> <h2>Lorem ipsum dolor sit amet.</h2> <p>Lorem ipsum dolor sit amet, consectetur......</p> <a href="#">View more</a> </figcaption> </figure> <figure class="effect"> <img src="img"/> <figcaption> <h2>Lorem ipsum dolor sit amet.</h2> <p>Lorem ipsum dolor sit amet, consectetur ......</p> <a href="#">View more</a> </figcaption> </figure> <figure class="effect"> <img src="img"/> <figcaption> <h2>Lorem ipsum dolor sit amet.</h2> <p>Lorem ipsum dolor sit amet, consec........</p> <a href="#">View more</a> </figcaption> </figure> </div>

As in jquery, you can implement the following:

  1. when clicking on the <figure class="effect"> link that is a descendant of this <figure class="effect"> , the class <active> should be added;
  2. at the same time, it turns out that the <active> class should be added only where it is clicked.

    2 answers 2

    Something like this

     $(document).ready(function() { $('.effect').click(function() { var wrapper = $('.wrapper').find('.active'); wrapper.removeClass('active'); $('a', this).addClass('active'); }); }); 
     .active { background: yellow; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <figure class="effect"> <img src="http://via.placeholder.com/140x100" /> <figcaption> <h2>Lorem ipsum dolor sit amet.</h2> <p>Lorem ipsum dolor sit amet, consectetur......</p> <a href="#">View more</a> </figcaption> </figure> <figure class="effect"> <img src="http://via.placeholder.com/140x100" /> <figcaption> <h2>Lorem ipsum dolor sit amet.</h2> <p>Lorem ipsum dolor sit amet, consectetur ......</p> <a href="#">View more</a> </figcaption> </figure> <figure class="effect"> <img src="http://via.placeholder.com/140x100" /> <figcaption> <h2>Lorem ipsum dolor sit amet.</h2> <p>Lorem ipsum dolor sit amet, consec........</p> <a href="#">View more</a> </figcaption> </figure> </div>

    • "the link ... should add a class" - Igor
    • @Igor added, thank you. - Kosta B.
    • Cool!!! It works as it should !!! As it turns out this is just when you understand)))) Thank you so much !!!! - Sergey

    In this spirit?

     $('figure.effect').on('click', function() { $('a', this).toggleClass('active'); }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <figure class="effect"> <img src="img" /> <figcaption> <h2>Lorem ipsum dolor sit amet.</h2> <p>Lorem ipsum dolor sit amet, consectetur......</p> <a href="#">View more</a> </figcaption> </figure> <figure class="effect"> <img src="img" /> <figcaption> <h2>Lorem ipsum dolor sit amet.</h2> <p>Lorem ipsum dolor sit amet, consectetur ......</p> <a href="#">View more</a> </figcaption> </figure> <figure class="effect"> <img src="img" /> <figcaption> <h2>Lorem ipsum dolor sit amet.</h2> <p>Lorem ipsum dolor sit amet, consec........</p> <a href="#">View more</a> </figcaption> </figure> </div>

    • A little bit wrong. I wanted the class <active> to be added to only one element at the click, and deleted from the rest. But anyway thanks for responding !!! - Sergey