如何在JavaScript中选择Bootstrap类修改样式 实现搜索隐藏卡片功能

问题根因 #

• 重复ID：你在循环生成卡片时给所有card加了同一个id="card-perim"，DOM要求ID全局唯一，所以通过ID选择器只能取到第一个匹配元素，无法批量操作所有卡片
• 选择器语法错误：多类名选择器需要用.连接且不能加空格，你写的.card col-sm-12 mb-13会被识别为「找card类元素内部的col-sm-12标签内部的mb-13标签」，完全匹配不到元素，同时你还把类名写错了，HTML里卡片的下边距类是mb-3，代码里写成了不存在的mb-13
• 操作对象错误：你只修改了内层.card-body的显示状态，外层的.card容器还保留着高度和外边距，自然会出现大量空白

修复方案 #

第一步：修改HTML（去除重复ID） #

把循环里的id="card-perim"删掉即可，ID不需要保留，用类选择器操作即可

<!-- 把这行 -->
<div class="card col-sm-12 mb-3" id="card-perim">
<!-- 改成 -->
<div class="card col-sm-12 mb-3">

第二步：替换JS代码 #

let filter = document.querySelector('#filter');
filter.addEventListener('keyup', searchID);

function searchID() {
  const input = filter.value.toUpperCase();
  // 直接选所有外层card元素
  const allCards = document.querySelectorAll('.card-lists .card');
  
  allCards.forEach(card => {
    // 先默认隐藏当前卡片
    card.style.display = 'none';
    // 找当前卡片下的所有标题
    const titles = card.querySelectorAll('.card-title');
    titles.forEach(title => {
      // 如果匹配到关键词，显示当前卡片
      if (title.innerText.toUpperCase().indexOf(input) > -1) {
        card.style.display = 'block';
        // 匹配到就不用再遍历剩余标题了，提前退出循环
        return;
      }
    })
  })
}

如果你想用Bootstrap自带的d-none类实现，也可以把修改display的逻辑换成类操作：

// 隐藏
card.classList.add('d-none');
// 显示
card.classList.remove('d-none');

内容的提问来源于stack exchange，提问作者nocnoc