Javascript 按类名排序HTML元素，但元素包含多个类

我在那里， 我正在制作一个艺术家页面，其中包含许多不同的艺术家，每个艺术家都有一个作品集图像和一些细节。我想在页面顶部有一些按钮，单击这些按钮可以对页面上的艺术家进行排序

我给每个艺术家类型指定了一个特定的类，当点击按钮按特定类型对艺术家进行排序时，它会隐藏所有未选中类型的艺术家。示例：单击“音乐”，它将隐藏所有“摄影”、“电影”和“图形”艺术家，只显示音乐艺术家

我遇到的问题是，一些艺术家既是“音乐”艺术家又是“摄影”艺术家，当我选择“音乐”艺术家时，它隐藏了艺术家，因为他也属于“摄影”艺术家收藏，自选择音乐艺术家以来，这些收藏将被隐藏

每个艺术家元素的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>

LexiconR&B|多伦多，ON
tentoesdownco@gmail.com

用于隐藏特定类的所有HTML元素的JS脚本代码

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

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

函数filterMusicArtists（）{
var appBanners=document.getElementsByClassName（'musicartist'），i；
对于（变量i=0；i

页面顶部过滤艺术家的按钮代码。这将调用所有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>

音乐

虽然我是JS新手，但我有HTML和CSS方面的经验。我知道这个过程很可能效率很低，也不理想，因此在此方面如有任何帮助，我们将不胜感激。只是想弄清楚如何展示属于不止一种艺术的艺术家

谢谢

首先是包含表示未单击类别的类的元素，然后是包含表示未单击类别的类的元素。最终的结果是，所有的艺术家，有你点击的类将显示

e、 g:

。。。将展示同时拥有

电影

和

摄影

课程或同时拥有

音乐

和

摄影

课程的艺术家，但没有只拥有

电影

或只拥有

音乐

的艺术家

非jQuery解决方案几乎同样简单。只需使用

document.getElementsByClassName

标识元素，然后设置

样式。首先显示具有表示未单击类别的类的元素，然后显示具有此类的元素。最终的结果是，所有的艺术家，有你点击的类将显示

e、 g:

。。。将展示同时拥有
电影
和
摄影
课程或同时拥有
音乐
和
摄影
课程的艺术家，但没有只拥有
电影
或只拥有
音乐
的艺术家

非jQuery解决方案几乎同样简单。只需使用
document.getElementsByClassName
标识元素，然后设置
样式。显示
这是因为您希望隐藏除所选艺术家以外的所有艺术家，但您的代码隐藏您选择的艺术家类型

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


函数筛选器音乐列表（类型）{
var appBanners=document.getElementsByClassName（'artist'）；
对于（变量i=0；i
这是因为您想隐藏除所选艺术家之外的所有艺术家，但您的代码隐藏了您选择的艺术家类型

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


函数筛选器音乐列表（类型）{
var appBanners=document.getElementsByClassName（'artist'）；
对于（变量i=0；i
更新您的问题以包括实际代码而不是全屏images@dekel很抱歉我已经更新了。请参阅此更新您的问题，以包括实际代码，而不是全屏images@dekel很抱歉我已经更新了。参考这个