javascript - 按类名对 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>

隐藏特定类的所有 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>

页面顶部用于过滤艺术家的按钮代码。这会调用所有 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 方面的经验。我知道这个过程很可能非常低效且不理想，因此任何帮助将不胜感激。只是想弄清楚如何展示属于多种艺术的艺术家!

谢谢!

Answer 1

第一.hide具有代表未单击类别的类的元素，然后 .show那些这样做的人。最终结果将是显示所有具有您单击的类别的艺术家。

例如:

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

...将显示同时拥有电影和摄影类(class)或同时拥有音乐和摄影的艺术家> 类，但没有一个只有电影或只有音乐。

非 jQuery 解决方案几乎同样简单。只需使用 document.getElementsByClassName 标识您的元素，然后设置 style.display。