如何使用按钮过滤 Bootstrap 张卡片？

Question

我如何通过单击按钮来过滤卡片？

我想在 java 脚本中创建一个函数，然后 link 它到按钮，但我不确定如何通过这种方法过滤卡片。

假设我点击了博物馆按钮，我希望所有带有博物馆的卡片都保留下来，所有没有的卡片都消失。

感谢您的帮助。

（HTML 可以进行一些复习，但到目前为止它只是一个模型）

<div class="buttons">
  <h2><b>Choices:</b></h2>
  <button onclick="blank()">Clear</button>
  <button onclick="">Museums</button>
  <button onclick="">Bars</button>
</div>
<div class="row">
  <div class="col-sm-12 col-md-6 col-lg-4 space-top">
    <div class="card" style="width: 18rem;">
      <img src="img/sher.jpg" class="card-img-top" alt="sher">
      <div class="card-body">
        <h5 class="card-title">Sheridans</h5>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        <a href="#" class="btn btn-primary">Go here</a>
      </div>
    </div>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-4 space-top">
    <div class="card" style="width: 18rem;">
      <img src="img/mus.jpg" class="card-img-top" alt="mus">
      <div class="card-body">
        <h5 class="card-title">Museum</h5>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        <a href="#" class="btn btn-primary">Go here</a>
      </div>
    </div>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-4 space-top">
    <div class="card" style="width: 18rem;">
      <img src="img/dock.jpg" class="card-img-top" alt="dock">
      <div class="card-body">
        <h5 class="card-title">Docks</h5>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        <a href="#" class="btn btn-primary">Go here</a>
      </div>
    </div>
  </div>
</div>
<!-- end Rows -->
</div>
<!-- end Container -->
<script src="js/Cho_script.js"></script>

Answer 1

最简单的方法是在您的每张卡片（博物馆或非博物馆）中添加一个 class，然后获取非博物馆卡片。或者，您可以抓取所有卡片，然后根据 card-title 的内容进行过滤，但这似乎更复杂。

const toggleThese = document.getElementsByClassName('notMuseum')
for (let i = 0; i < toggleThese.length; i++) {
  toggleThese[i].style.display = 'block'
}

function toggleMe() {
  for (let i = 0; i < toggleThese.length; i++) {
    if (toggleThese[i].style.display == 'block') {
      toggleThese[i].style.display = 'none'
    } else {
      toggleThese[i].style.display = 'block'
    }
  }
}

<div class="buttons">
  <h2><b>Choices:</b></h2>
  <button onclick="blank()">Clear</button>
  <button onclick="toggleMe()">Museums</button>
  <button onclick="">Bars</button>
</div>
<div class="row">
  <div class="col-sm-12 col-md-6 col-lg-4 space-top">
    <div class="card notMuseum" style="width: 18rem;">
      <img src="img/sher.jpg" class="card-img-top" alt="sher">
      <div class="card-body">
        <h5 class="card-title">Sheridans</h5>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        <a href="#" class="btn btn-primary">Go here</a>
      </div>
    </div>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-4 space-top">
    <div class="card Museum" style="width: 18rem;">
      <img src="img/mus.jpg" class="card-img-top" alt="mus">
      <div class="card-body">
        <h5 class="card-title">Museum</h5>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        <a href="#" class="btn btn-primary">Go here</a>
      </div>
    </div>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-4 space-top">
    <div class="card notMuseum" style="width: 18rem;">
      <img src="img/dock.jpg" class="card-img-top" alt="dock">
      <div class="card-body">
        <h5 class="card-title">Docks</h5>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        <a href="#" class="btn btn-primary">Go here</a>
      </div>
    </div>
  </div>

  <!-- end Rows -->
</div>
<!-- end Container -->
<script src="js/Cho_script.js"></script>

下面是使用过滤器的方法：

const cardObjects = document.getElementsByClassName('card')
var cardArray = Object.values(cardObjects)


function checkMuseum(item) {
  const cardTitle = item.getElementsByClassName('card-title')[0]  
  if (cardTitle.textContent != 'Museum')return item;
}

function myFunction() {  
  var notMuseum = cardArray.filter(checkMuseum);  
  for(let i = 0; i<notMuseum.length;i++){  
      if(notMuseum[i].style.display == ''|| notMuseum[i].style.display=='block'){ 
          notMuseum[i].style.display='none';
      }else{
          notMuseum[i].style.display='block';
      }
   } 
}

<div class="buttons">
  <h2><b>Choices:</b></h2>
  <button onclick="blank()">Clear</button>
  <button onclick="myFunction()">Museums</button>
  <button onclick="">Bars</button>
</div>
<div class="row">
  <div class="col-sm-12 col-md-6 col-lg-4 space-top">
    <div class="card notMuseum" style="width: 18rem;">
      <img src="img/sher.jpg" class="card-img-top" alt="sher">
      <div class="card-body">
        <h5 class="card-title">Sheridans</h5>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        <a href="#" class="btn btn-primary">Go here</a>
      </div>
    </div>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-4 space-top">
    <div class="card Museum" style="width: 18rem;">
      <img src="img/mus.jpg" class="card-img-top" alt="mus">
      <div class="card-body">
        <h5 class="card-title">Museum</h5>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        <a href="#" class="btn btn-primary">Go here</a>
      </div>
    </div>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-4 space-top">
    <div class="card notMuseum" style="width: 18rem;">
      <img src="img/dock.jpg" class="card-img-top" alt="dock">
      <div class="card-body">
        <h5 class="card-title">Docks</h5>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        <a href="#" class="btn btn-primary">Go here</a>
      </div>
    </div>
  </div>

  <!-- end Rows -->
</div>
<!-- end Container -->

Answer 2

一个简单的方法是 add/remove Bootstrap d-none class...

<button onclick="clearAll()">Clear</button>
<button onclick="filter('Museum')">Museums</button>
<button onclick="filter('Bar')">Bars</button>


var filter = (filter) => {
    const cards = document.getElementsByClassName("col-sm-12");
    for (let i = 0; i < cards.length; i++) {
        let title = cards[i].querySelector(".card .card-body .card-title");
        if (title.innerText.indexOf(filter) > -1) {
            cards[i].classList.remove("d-none")
        } else {
            cards[i].classList.add("d-none")
        }
    }
}

var clearAll = () => {
    cards = document.getElementsByClassName("col-sm-12")
    for (i = 0; i < cards.length; i++) {
        cards[i].classList.remove("d-none")
    }
}

Demo

如何使用按钮过滤 Bootstrap 张卡片？

How can I filter Bootstrap cards with the use of a button?

html

javascript

bootstrap-5