Hey there, I've been working on an artist page that showcases multiple artists, each with a portfolio image and some detailed information. My goal is to have buttons at the top of the page that, upon clicking, will sort the artists displayed.
To achieve this, I assigned specific classes to each type of artist. When a button is clicked to filter by a specific type, it hides all artists not belonging to that type. For example, selecting 'Music' would hide all 'Photography', 'Film', and 'Graphic' artists, leaving only the music artists visible.
The issue I'm facing is with artists who fall into multiple categories. For instance, if an artist is classified as both 'Music' and 'Photography', selecting 'Music' would unintentionally hide them due to their dual classification. The challenge lies in displaying artists who belong to more than one genre.
Here is a snippet of the HTML code 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><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d4958534952584e59524a535e527d5">[email protected]</a></strong></p>
</div>
</div>
Below is the JavaScript script filter function used to hide all elements of a 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>
Lastly, here is the code for the buttons at the top of the page that filter artists. These buttons trigger the JS methods to hide artists of other types:
<div class="col-md-2">
<div class="music">
<div class="musicgenre" type="button" onclick="showMusicArtists();filterPhotographyArtists();filterFilmArtists();filterOtherArtists();filterGraphicArtists();filterFashionArtists();">Music</div>
</div>
</div>
While I'm familiar with HTML and CSS, JavaScript is newer to me. I understand that my current approach may not be the most efficient or ideal, so any guidance on improving it would be greatly appreciated. I'm determined to find a solution to display artists with multiple art genres!
Thanks!