Сортировка HTML-элементов по имени класса, но имеющих элемент с более чем одним классом

Question

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

Я дал каждому художнику тип определенного класса, и когда кнопка нажата, чтобы отсортировать художников по определенному типу, он скрывает всех художников типов, которые не были выбраны. Пример: нажмите «Музыка», и он скрывает всех художников «Фотография», «Фильм» и «Графика», оставив только музыкантов.

Проблема, с которой я сталкиваюсь, - это художники как «Музыка» и «Фотография», и когда я выбираю художников «Музыка», он скрывает художника, потому что он также принадлежит к коллекции художников «Фотография», быть скрытыми, поскольку музыканты были выбраны.

код HTML для каждого художника элемента

 <div class="col-md-4 col-lg-4 musicartist"> 
     <div id="artist1"> 
      <div class="arthov"> 
      <img class="img-circle img-responsive" src="../img/artists/music/Lexxicon.png"> 
      <div id="recentwork"><p><a href="#">View Artist</a><p></div> 
      </div> 
      <p><strong><h3>Lexxicon</h3></strong>R&B | Toronto, ON<br>tentoesdownco@gmail.com</strong></p> 
     </div> 
     </div> 

код скрипта JS для скрытия всех HTML-элементов определенного класса.

<script> 
function filterMusicArtists() { 
    var appBanners = document.getElementsByClassName('musicartist'), i; 

    for (var i = 0; i < appBanners.length; i ++) { 
     appBanners[i].style.display = 'none'; 
    } 
} 
</script> 

код кнопок в верхней части страницы, которые фильтруют художников. Это вызывает ВСЕ методы JS, чтобы скрыть другие типы исполнителей, которые не были выбраны.

<div class="col-md-2"> 
      <div class="music"> 
      <div class="musicgenre" type="button" onclick="showMusicArtists();filterPhotographyArtists();filterFilmArtists();filterOtherArtists();filterGraphicArtists();filterFashionArtists();">Music</div> 
      </div> 
     </div> 

У меня есть опыт работы с HTML и CSS, хотя я новичок в JS. Я знаю, что этот процесс, скорее всего, очень неэффективен и не идеален, поэтому любая помощь будет оценена по этому поводу. Просто пытаюсь понять, как отображать художников, которые принадлежат к более чем одному искусству!

спасибо!

Answer 1

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

.: например

$('.film, .music').hide(); 
$('.photography').show(); 

... покажет художников, которые имеют оба film и photography классов или оба musicphotography и классов, но ни один из них, которые имеют только film или только music.

Решение, отличное от jQuery, почти так же просто. Просто определите свои элементы с помощью document.getElementsByClassName, затем установите style.display.

Answer 2

Это потому, что вы хотите скрыть всех исполнителей, кроме выбранного, но ваш код скрывает тип выбранных вами художников.

<script> 
function filterMusicArtists(type) { 

var appBanners = document.getElementsByClassName('artist'); 

for (var i = 0; i < appBanners.length; i ++) { 
    var currentArt = appBanners[i]; 
    if (currentArt.classList.contains(type)) 
    { 
     if (!currentArt.hidden){ 
      currentArt.hidden=true; 
     } 
    } 
    } 
} 
</script>