There is a code:

$('.content__menu a').on('click', function () { if (this.value == 'all') { $('.tile').removeClass('.disabled-tile'); } else{ var elems = $('.tile[data-type="'+this.value+'"]'); $('.tile').not(elems).hide(); elems.addClass('.disabled-tile'); } });

HTML

 <nav class="content__menu"> <a href="#" class="menu__item menu__item_active" value="all">Все страны</a> <a href="#" class="menu__item" value="culture">Культура</a> <a href="#" class="menu__item" value="extreme">Экстрим</a> <a href="#" class="menu__item" value="atmos">Атмосфера</a> <a href="#" class="menu__item" value="people">Люди</a> </nav> <section class="section__box"> <article class="tile disabled-tile" data-type="culture"> <div class="owl-carousel"> <div class="tile__slide slide-mainbg cuba_slide-1"> <h2 class="tile__slide_country">Cuba</h2> </div> <div class="tile__slide cuba_slide-2"> <div class="tile__slide_text">Хэмингуэй, став весьма знаменитым, естественно, мог выбрать любое место в мире. Почему же он 22 года прожил в Гаване? Потому что это свобода! </div> <h3 class="slide__footer-country-name">Cuba</h3> </div> <div class="tile__slide slide-mainbg cuba_slide-3"> <a class="fancybox slide__btn-zoom lazy" href="img/cuba.jpg" alt="Cuba"> <img src="img/icon_zoom.svg" alt="" width="40px" height="40px"> </a> <h3 class="slide__footer-country-name">Cuba</h3> </div> <div class="tile__slide slide-mainbg cuba_slide-4"> <a class="fancybox fancybox.iframe slide__btn-zoom" href="https://www.youtube.com/embed/3jkHdoHe1kc?enablejsapi=1&wmode=opaque&autoplay=1"> <img src="img/icon_play.svg" alt="" width="40px" height="40px"> </a> <h3 class="slide__footer-country-name">Cuba</h3> </div> </div> </article> <article class="tile" data-type="extreme"> <div class="owl-carousel"> <div class="tile__slide slide-mainbg rus_slide-1"> <h2 class="tile__slide_country">Russia</h2> </div> <div class="tile__slide slide-mainbg rus_slide-2"> <h3 class="slide__footer-country-name">Russia</h3> </div> </div> </article> <article class="tile tile--width2 tile--height2" data-type='culture'> <h2 class="tile--width2__country-name">Latin America</h2> <div class="tile--width2__features"> <span class="tile--width2__features-item">1. Honduras</span> <span class="tile--width2__features-item">2. Columbia</span> <span class="tile--width2__features-item">3. Panama</span> <span class="tile--width2__features-item">4. Brazil</span> <span class="tile--width2__features-item">5. Peru</span> </div> </article> <article class="tile" data-type="atmos"> <div class="owl-carousel"> <div class="tile__slide slide-mainbg eng_slide-1"> <h2 class="tile__slide_country">England</h2> </div> <div class="tile__slide slide-mainbg eng_slide-2"> <h3 class="slide__footer-country-name">England</h3> </div> </div> </article> <article class="tile" data-type="atmos"> <div class="owl-carousel"> <div class="tile__slide slide-mainbg norw_slide-1"> <h2 class="tile__slide_country">Norway</h2> </div> <div class="tile__slide slide-mainbg norw_slide-2"> <h3 class="slide__footer-country-name">Norway</h3> </div> </div> </article>

But when you click - all the elements .tile disappear , where is the error?

  • console.log for some reason gives out ".tile [data-type =" undefined "]" - Atomrr
  • $(this).attr('value') ! == this.value . Use an attribute, not a variable. - Dimava
  • @Dimava not quite understand what and how to change. I tried to replace the value in different ways. Can you please in more detail? - Atomrr
  • Try using <a value="smth"> $(this).attr('value') instead of this.value . - Dimava
  • @Dimava I apologize for being nosy and stupid. Replaced by if $ (this) .attr ('value') == 'all' {} gives an error - Atomrr

2 answers 2

this.value returns the value of the property (property) "value", which is not defined, and not the attribute (attribute) "value" defined in HTML.

Replacing this.value with $(this).attr('value') solves this problem.

If you hurt a mistake, you .hide() elements, but do not show .show() .

 $('.content__menu a').on('click', function(e) { console.log($(this).attr('value')); if ($(this).attr('value') == 'all') { $('.tile').removeClass('.disabled-tile').show(); } else { var elems = $('.tile[data-type="' + $(this).attr('value') + '"]'); $('.tile').not(elems).hide(); elems.addClass('.disabled-tile').show(); } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="content__menu"> <a href="#" class="menu__item menu__item_active" value="all">Все страны</a> <a href="#" class="menu__item" value="culture">Культура</a> <a href="#" class="menu__item" value="extreme">Экстрим</a> <a href="#" class="menu__item" value="atmos">Атмосфера</a> <a href="#" class="menu__item" value="people">Люди</a> </nav> <section class="section__box"> <article class="tile disabled-tile" data-type="culture"> <div class="owl-carousel"> <div class="tile__slide slide-mainbg cuba_slide-1"> <h2 class="tile__slide_country">Cuba</h2> </div> <div class="tile__slide cuba_slide-2"> <div class="tile__slide_text">Хэмингуэй, став весьма знаменитым, естественно, мог выбрать любое место в мире. Почему же он 22 года прожил в Гаване? Потому что это свобода! </div> <h3 class="slide__footer-country-name">Cuba</h3> </div> <div class="tile__slide slide-mainbg cuba_slide-3"> <a class="fancybox slide__btn-zoom lazy" href="img/cuba.jpg" alt="Cuba"> <img src="img/icon_zoom.svg" alt="" width="40px" height="40px"> </a> <h3 class="slide__footer-country-name">Cuba</h3> </div> <div class="tile__slide slide-mainbg cuba_slide-4"> <a class="fancybox fancybox.iframe slide__btn-zoom" href="https://www.youtube.com/embed/3jkHdoHe1kc?enablejsapi=1&wmode=opaque&autoplay=1"> <img src="img/icon_play.svg" alt="" width="40px" height="40px"> </a> <h3 class="slide__footer-country-name">Cuba</h3> </div> </div> </article> <article class="tile" data-type="extreme"> <div class="owl-carousel"> <div class="tile__slide slide-mainbg rus_slide-1"> <h2 class="tile__slide_country">Russia</h2> </div> <div class="tile__slide slide-mainbg rus_slide-2"> <h3 class="slide__footer-country-name">Russia</h3> </div> </div> </article> <article class="tile tile--width2 tile--height2" data-type='culture'> <h2 class="tile--width2__country-name">Latin America</h2> <div class="tile--width2__features"> <span class="tile--width2__features-item">1. Honduras</span> <span class="tile--width2__features-item">2. Columbia</span> <span class="tile--width2__features-item">3. Panama</span> <span class="tile--width2__features-item">4. Brazil</span> <span class="tile--width2__features-item">5. Peru</span> </div> </article> <article class="tile" data-type="atmos"> <div class="owl-carousel"> <div class="tile__slide slide-mainbg eng_slide-1"> <h2 class="tile__slide_country">England</h2> </div> <div class="tile__slide slide-mainbg eng_slide-2"> <h3 class="slide__footer-country-name">England</h3> </div> </div> </article> <article class="tile" data-type="atmos"> <div class="owl-carousel"> <div class="tile__slide slide-mainbg norw_slide-1"> <h2 class="tile__slide_country">Norway</h2> </div> <div class="tile__slide slide-mainbg norw_slide-2"> <h3 class="slide__footer-country-name">Norway</h3> </div> </div> </article>

  • Thank you so much, very helpful) - Atomrr
  • last remark, and how to reset .disabled when switching to another item? But when switching, the class .disabled remains on those blocks where it was before - Atomrr
  • $('.tile').not(elems).hide() .removeClass('.disabled-tile') - Dimava
  • at the end through another else to add? - Atomrr
  • figured out. in .removeClass ('. disabled-tile'), you need to remove the dot to make it happen - .removeClass ('disabled-tile'). Thank you again and forgive my intrusiveness) - Atomrr

Perhaps so:

  $('.content__menu a').on('click', function () { if (this.value == 'all') { $('.tile').removeClass('.disabled-tile'); } else{ var elems = $('.tile[data-type="'+this.value+'"]'); **$('.tile').removeClass('.disabled-tile');** elems.addClass('.disabled-tile'); } })
  • unfortunately - zero reaction. The element is defined as follows: <article class = "tile" data-type = "extreme"> Is this all right here? - Atomrr