Sorting HTML elements by class name, but having element with more than one class

Question

I there, I am working on an artist page which contains many different artists, with a portfolio image and some detail for each artist. I want to have buttons at the top of the page which, upon click sort the artists on the page.

I gave each artist type a specific class, and when the button is clicked to sort the artists by specific type, it hides all the artists of types which were not selected. Example: click 'Music' and it hides all 'Photography', 'Film', and 'Graphic' artists, leaving only the music artists displayed.

The issue I have is some artists are both 'Music' and 'Photography' artists, and when I select 'Music' artists, it hides the artist because he also belongs to the 'Photography' artist collection, which are to be hidden since music artists were selected.

code of the HTML for each artist element

        <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>[email protected]</strong></p>
        </div>
      </div>

code of the JS script for hiding all HTML elements of specific class.

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

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

code of buttons at top of page which filter artists. This calls ALL the JS methods to hide the other artist types which were not selected.

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

I have experience with HTML and CSS although I am new to JS. I am aware that this process is most likely very inefficient and not ideal, so any help would be appreciated on this. Just trying to figure out how to display the artists which belong to more than one art!

thanks!

Answer 1

First .hide the elements that have the classes representing the category that wasn't clicked on, then .show the ones that do. The end result will be that all the artists that have the class you clicked on will be shown.

e.g.:

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

... will show artists who have both the film and photography classes or both the music and photography classes, but none of the ones who have only film or only music.

The non-jQuery solution is almost as easy. Just identify your elements with document.getElementsByClassName then set the style.display.

Answer 2

It's because you want to hide all artists except the chosen, but your code hide the type of artists you have choose.

 <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>