Скрыть / показать элементы с тем же классом по клику

Question

Я пытаюсь переключать текст при нажатии элементов того же класса. У меня есть текст, отображаемый при нажатии, но когда я щелкаю по другому элементу, текст остается. Как мне удалить его из других, когда щелкают по другому элементу того же класса?

$('.video-carousel--thumbnail').on('click', function() {
  $(this).find('.now-playing').not(this).css('display', 'none');
  $(this).find('.now-playing').css('display', 'block');
});

.now-playing {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video-carousel--thumbnail">
  <div class="l-thumbnail__title">
    <p><strong>Thumbnail One</strong></p>
    <p class="now-playing"><strong>Now Playing</strong></p>
  </div>
</div>
<div class="video-carousel--thumbnail">
  <div class="l-thumbnail__title">
    <p><strong>Thumbnail Two</strong></p>
    <p class="now-playing"><strong>Now Playing</strong></p>
  </div>
</div>
<div class="video-carousel--thumbnail">
  <div class="l-thumbnail__title">
    <p><strong>Thumbnail Three</strong></p>
    <p class="now-playing"><strong>Now Playing</strong></p>
  </div>
</div>

Answer 1

Вам не нужна логика обхода DOM c при сокрытии всех других элементов. Просто выберите их напрямую, используя $('.now-playing'). Также обратите внимание, что вы можете использовать hide() и show() вместо css().

$('.video-carousel--thumbnail').on('click', function() {
  $('.now-playing').hide()
  $(this).find('.now-playing').show();
});

Также обратите внимание, что если вы хотите переключать элементы, то ваш селектор not() неверен как this относится к элементу .video-carousel--thumbnail, вызвавшему событие, а не к элементу .now-playing, который необходимо исключить из коллекции.

Для этого необходимо сначала найти соответствующий элемент, а затем исключить его из тех, которые вы удаляете. класс до вызова toggle(). Попробуйте это:

$('.video-carousel--thumbnail').on('click', function() {
  var $target = $(this).find('.now-playing');
  $('.now-playing').not($target).hide()
  $target.toggle();
});

.now-playing {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video-carousel--thumbnail">
  <div class="l-thumbnail__title">
    <p><strong>Thumbnail One</strong></p>
    <p class="now-playing"><strong>Now Playing</strong></p>
  </div>
</div>
<div class="video-carousel--thumbnail">
  <div class="l-thumbnail__title">
    <p><strong>Thumbnail Two</strong></p>
    <p class="now-playing"><strong>Now Playing</strong></p>
  </div>
</div>
<div class="video-carousel--thumbnail">
  <div class="l-thumbnail__title">
    <p><strong>Thumbnail Three</strong></p>
    <p class="now-playing"><strong>Now Playing</strong></p>
  </div>
</div>