добавить / удалить класс, не удаляя класс по клику

Question

У меня установлена ​​функция щелчка для галереи слайдера видео, когда я щелкаю по главному воспроизведению видео или / или делаю паузу, я пытаюсь добавить класс «active - thumbnail» к соответствующему миниатюре. Это работает и добавление класса. Когда я снова нажимаю на основное видео, оно не удаляет класс. Не знаете, где я иду не так, любой совет?

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

});

Answer 1

Вам нужно проверить, есть ли у выбранного элемента активный класс или нет, затем приступить к добавлению или удалению активного класса

Я заимствовал html и css из другого ответа

$('.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>

Answer 2

Пожалуйста, добавьте Codepen, чтобы узнать код HTML.

Но я вижу (,) вместо (;) в строке 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');

});

См. https://codepen.io/AngelFQC/pen/RwPLygm