add / remove class not removing class on click

Question

I have a click function set for a video slider gallery, when i click the main video play / or pause I am trying to add a class "active--thumbnail" to the corresponding thumbnail. It is working and adding the class. When I click the main video again it is not removing the class. Not sure where I am going wrong here, any advice?

jquery:

$('.video-main').on('click', function () {
var mainVideoIndex = $('.video-main').index(this),
activeThumbnail = $(this).closest('.video-playlist').find('.l-thumbnail__title').eq(mainVideoIndex),

$('.l-thumbnail__title').not(activeThumbnail).removeClass('active--thumbnail');
activeThumbnail.addClass('active--thumbnail');

});

The last line of your click handler is activeThumbnail.addClass('active--thumbnail'); so when clicking on the same thumb as you previously did, will not remove the active class. You need to check if the clicked element already has active or not and do what you need — Huangism
– Huangism, Commented Mar 5, 2020 at 15:18

Huangism · Accepted Answer · 2020-03-05 15:27:01Z

You need to check if the clicked item has the active class or not then proceed to add or remove the active class

I borrowed the html and css from the other answer

$('.video-main').on('click', function() {
  var $this = $(this);
  var mainVideoIndex = $('.video-main').index(this),
    activeThumbnail = $this.closest('.video-playlist').find('.l-thumbnail__title').eq(mainVideoIndex);

  // check if the clicked is the same as currently active item
  // if it is then remove active
  if (activeThumbnail.hasClass('active--thumbnail')) {
    activeThumbnail.removeClass('active--thumbnail');
  }
  // remove active from all thumbs titles then add active to clicked item
  else {
    $('.l-thumbnail__title').removeClass('active--thumbnail');
    activeThumbnail.addClass('active--thumbnail');
  }
});

ul.video-playlist li p {
    border-radius: 5px;
    padding: 5px;
}

.active--thumbnail {
    box-shadow: 0px 0px 5px green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="video-playlist">
    <li>
        <p class="l-thumbnail__title">Thumbnail 1</p>
        <button class="video-main">Video 1</button>
    </li>
    <li>
        <p class="l-thumbnail__title">Thumbnail 2</p>
        <button class="video-main">Video 2</button>
    </li>
    <li>
        <p class="l-thumbnail__title">Thumbnail 3</p>
        <button class="video-main">Video 3</button>
    </li>
    <li>
        <p class="l-thumbnail__title">Thumbnail 4</p>
        <button class="video-main">Video 4</button>
    </li>
</ul>

Angel Fernando Quiroz Campos · Accepted Answer · 2020-03-05 15:20:58Z

0

Please add a Codepen to know you HTML code.

But I see a (,) instead of a (;) in line 3.

$('.video-main').on('click', function () {
var mainVideoIndex = $('.video-main').index(this),
    activeThumbnail = $(this).closest('.video-playlist').find('.l-thumbnail__title').eq(mainVideoIndex);

$('.l-thumbnail__title').not(activeThumbnail).removeClass('active--thumbnail');
activeThumbnail.addClass('active--thumbnail');

});

See this https://codepen.io/AngelFQC/pen/RwPLygm

answered Mar 5, 2020 at 15:20

Angel Fernando Quiroz Campos

113 bronze badges

1 Comment

Huangism Over a year ago

Actually there is no need to add codepen, there is a snippet button which can be used to create working code on here

Collectives™ on Stack Overflow

add / remove class not removing class on click

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related