单击时隐藏/显示具有相同类的元素

Question

I'm trying to have some text toggle on click of elements with same class. I have the text showing on click but when I click another element the text remains. How do I have it removed from others when another element of same class is clicked?

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

You don't need the DOM traversal logic when hiding all other elements. Just select them directly using $('.now-playing') . Also note that you can use hide() and show() instead of css() .

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

Also note that if you want to toggle the elements then your not() selector is incorrect as this refers to the .video-carousel--thumbnail element which raised the event, not the .now-playing element to exclude from the collection.

For that to work you need to find the relevant element first, then exclude it from those you remove the class from before calling toggle() . Try this:

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