使用JS按多个类别过滤？答案

【问题标题】：Using JS to filter by multiple categories?使用JS按多个类别过滤？
【发布时间】：2020-04-26 12:51:18
【问题描述】：

我目前正在开发一个网站，该网站显示了我观看的所有电影的可视化表示。电影清单，如果你愿意的话。我想出了如何使用 JS 根据按钮按下来过滤列表，但是，它一次只能过滤 1 个按钮。我希望根据多个按钮过滤列表。

例如：“所有已完成电影，评分为 3，动作 genre*”。

或：“所有已完成和正在观看的电影”

我从来没有学过 JS（虽然我打算最终学）所以我有点迷茫如何做到这一点。

这是我当前的代码：

filterSelection("all")
function filterSelection(c) {
    var eles = document.getElementsByClassName("flex-card");
    for(var i=0; i < eles.length; i++) {
        if (c === "all" || eles[i].classList.contains(c)) {
            eles[i].classList.remove("displayNone");
    		} 
        else {
    		    eles[i].classList.add("displayNone");
        }
    }
}

.card:hover .overlay {
    display: none;
}

.btn:hover {
    background-color: hsl(14,80%,70%);
}

.displayNone {
    display: none;
}

.yellow {
    color: hsl(14,80%,70%);
}

.heading {
    color: white;
}

.button-container {
    margin: 0px 0px 12px;
    text-align: center;
    padding-bottom: 12px;
}

.btn {
    color: hsl(14,80%,30%);
    background-color: hsl(43,83%,55%);
    border: 1px solid rgba(0, 0, 0, 0.94);
    border-radius: 10px;
    text-align: center;
    font-weight: 600;
    font-size: 10px;
    line-height: 20px;
    width: 80px;
    margin: 5px 0px 5px 5px;
    padding: 0px 12px;
}

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding-left: 15%;
    padding-right: 15%;
}

/* I am using a 7:10 aspect ratio (width:height) */
.flex-card {
    position: relative;
    height: 265px;
    width: 185px;
    perspective: 1000px;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

.a {
}

.card {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s  0s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.image {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.overlay {
    position: absolute;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    transition: .1s ease;
}

.title {
    text-align: center;
    color: white;
    font-size: 14px;
    font-weight: 600;
    margin: 8px;
}

.subtitle {
    margin: 8px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>New page</title>
        <link href="css/new.css" rel="stylesheet" type="text/css">
    </head>
    <body style="background-color: rgb(19,23,29);">
        <div>
            <h1 style="text-align: center;" class="heading">Movie List</h1>
            <div class="button-container" data-pg-name="Buttons">
                <button class="btn" onclick="filterSelection('all')">All</button>
                <button class="btn" onclick="filterSelection('watching')">Watching</button>
                <button class="btn" onclick="filterSelection('planned')">Planned</button>
                <button class="btn" onclick="filterSelection('completed')">Completed</button>
                <button class="btn" onclick="filterSelection('dropped')">Dropped</button>
                <br>
                <button class="btn" onclick="filterSelection('five')">5</button>
                <button class="btn" onclick="filterSelection('four')">4</button>
                <button class="btn" onclick="filterSelection('three')">3</button>
                <button class="btn" onclick="filterSelection('two')">2</button>
                <button class="btn" onclick="filterSelection('one')">1</button>
                <br>
                <button class="btn" onclick="filterSelection('action')">Action</button>
                <button class="btn" onclick="filterSelection('horror')">Horror</button>
                <button class="btn" onclick="filterSelection('romance')">Romance</button>
                <button class="btn" onclick="filterSelection('etc')">etc.</button>
                <button class="btn" onclick="filterSelection('etc')">etc.</button>
            </div>
        </div>
        <div class="flex-container">
            <div class="watching five flex-card">
                <a href="#">
                    <div class="card">
                        <img src="https://via.placeholder.com/300" class="image">
                        <div class="overlay">
                            <p class="title">Title</p>
                            <p class="subtitle yellow">Studio</p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="planned three flex-card">
                <a href="#">
                    <div class="card">
                        <img src="https://via.placeholder.com/300" class="image">
                        <div class="overlay">
                            <p class="title">Title</p>
                            <p class="subtitle yellow">Studio</p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="completed two flex-card">
                <a href="#">
                    <div class="card">
                        <img src="https://via.placeholder.com/300" class="image">
                        <div class="overlay">
                            <p class="title">Title</p>
                            <p class="subtitle yellow">Studio</p>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </body>
</html>

也在jsfidle

【问题讨论】：

请添加一个最小的可重现示例。提问时不要输入 LONG 代码。相反，当您发现问题时，只需放置零件即可。

标签： javascript html

【解决方案1】：

可以将所有单击的选择器存储在一个数组中，并根据整个数组的状态渲染卡片，而不仅仅是最后一次单击的按钮。快速而肮脏的示例可能如下所示：

const allCards = document.querySelectorAll(".flex-card");
var displayAll = true  // special value for displaying all - default true
var activeCards = []  // array holding all selected values

function toggleSelector(c) {
    if (c === 'all') {
    displayAll = !displayAll
    activeCards = []  // optional
    return
  }

  displayAll = false
  if (activeCards.includes(c)) {
    activeCards = activeCards.filter(card => card !== c)
  } else {
    activeCards.push(c)
  }
}

// quick dirty way to render cards
function renderCards() {
  if (displayAll) {
    allCards.forEach(card => showCard(card))
    return
  }

  allCards.forEach(card => hideCard(card))  
  
  for (let card of allCards) {
    for (let cardClass of card.classList) {
      if (activeCards.includes(cardClass)) {
      	showCard(card)
        break;
      }
    }
  }
}

// on each click toggle clicked selector and re-render cards
function filterSelection(c) {
  toggleSelector(c)
  renderCards()
}

function showCard(card) {
  card.classList.remove("displayNone");	
}

function hideCard(card) {
  card.classList.add("displayNone");
}

renderCards()

.card:hover .overlay {
    display: none;
}

.btn:hover {
    background-color: hsl(14,80%,70%);
}

.displayNone {
    display: none;
}

.yellow {
    color: hsl(14,80%,70%);
}

.heading {
    color: white;
}

.button-container {
    margin: 0px 0px 12px;
    text-align: center;
    padding-bottom: 12px;
}

.btn {
    color: hsl(14,80%,30%);
    background-color: hsl(43,83%,55%);
    border: 1px solid rgba(0, 0, 0, 0.94);
    border-radius: 10px;
    text-align: center;
    font-weight: 600;
    font-size: 10px;
    line-height: 20px;
    width: 80px;
    margin: 5px 0px 5px 5px;
    padding: 0px 12px;
}

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding-left: 15%;
    padding-right: 15%;
}

/* I am using a 7:10 aspect ratio (width:height) */
.flex-card {
    position: relative;
    height: 265px;
    width: 185px;
    perspective: 1000px;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

.a {
}

.card {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s  0s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.image {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.overlay {
    position: absolute;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    transition: .1s ease;
}

.title {
    text-align: center;
    color: white;
    font-size: 14px;
    font-weight: 600;
    margin: 8px;
}

.subtitle {
    margin: 8px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>New page</title>
        <link href="css/new.css" rel="stylesheet" type="text/css">
    </head>
    <body style="background-color: rgb(19,23,29);">
        <div>
            <h1 style="text-align: center;" class="heading">Movie List</h1>
            <div class="button-container" data-pg-name="Buttons">
                <button class="btn" onclick="filterSelection('all')">All</button>
                <button class="btn" onclick="filterSelection('watching')">Watching</button>
                <button class="btn" onclick="filterSelection('planned')">Planned</button>
                <button class="btn" onclick="filterSelection('completed')">Completed</button>
                <button class="btn" onclick="filterSelection('dropped')">Dropped</button>
                <br>
                <button class="btn" onclick="filterSelection('five')">5</button>
                <button class="btn" onclick="filterSelection('four')">4</button>
                <button class="btn" onclick="filterSelection('three')">3</button>
                <button class="btn" onclick="filterSelection('two')">2</button>
                <button class="btn" onclick="filterSelection('one')">1</button>
                <br>
                <button class="btn" onclick="filterSelection('action')">Action</button>
                <button class="btn" onclick="filterSelection('horror')">Horror</button>
                <button class="btn" onclick="filterSelection('romance')">Romance</button>
                <button class="btn" onclick="filterSelection('etc')">etc.</button>
                <button class="btn" onclick="filterSelection('etc')">etc.</button>
            </div>
        </div>
        <div class="flex-container">
            <div class="watching five flex-card displayNone">
                <a href="#">
                    <div class="card">
                        <img src="https://via.placeholder.com/300" class="image">
                        <div class="overlay">
                            <p class="title">Title</p>
                            <p class="subtitle yellow">Studio</p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="planned three flex-card displayNone action">
                <a href="#">
                    <div class="card">
                        <img src="https://via.placeholder.com/300" class="image">
                        <div class="overlay">
                            <p class="title">Title</p>
                            <p class="subtitle yellow">Studio</p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="completed two flex-card displayNone action">
                <a href="#">
                    <div class="card">
                        <img src="https://via.placeholder.com/300" class="image">
                        <div class="overlay">
                            <p class="title">Title</p>
                            <p class="subtitle yellow">Studio</p>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </body>
</html>

【讨论】：