如何实现仅在选中分类内进行图片名称搜索？

核心思路是跟踪当前选中的分类，在搜索时同时校验图片的分类归属和名称匹配状态，具体修改如下：

修改后的JavaScript代码 #

// 新增全局变量存储当前选中的分类，默认显示全部
let currentFilter = 'all';

(function() {
  const buttons = document.querySelectorAll('.btn')
  const storeImages = document.querySelectorAll('.store-items')

  buttons.forEach((button) => {
    button.addEventListener('click', (e) => {
      e.preventDefault()
      const filter = e.target.dataset.filter
      // 更新当前选中的分类
      currentFilter = filter;

      storeImages.forEach((item) => {
        if (filter === 'all') {
          item.style.display = 'block'
        } else {
          item.style.display = item.classList.contains(filter) ? 'block' : 'none'
        }
      })
    })
  })
})();

const search = () => {
  const searchbox = document.getElementById("search-item").value.toUpperCase();
  const nature = document.querySelectorAll('.store-items');

  for (var i = 0; i < nature.length; i++) {
    let match = nature[i].getElementsByTagName('p')[0];
    if (match) {
      let textvalue = match.textContent || match.innerHTML
      // 名称匹配判断
      const isNameMatch = textvalue.toUpperCase().indexOf(searchbox) > -1;
      // 分类匹配判断：all则全部符合，否则检查是否包含当前分类类名
      const isFilterMatch = currentFilter === 'all' || nature[i].classList.contains(currentFilter);

      // 仅当分类和名称都匹配时才显示
      nature[i].style.display = (isNameMatch && isFilterMatch) ? 'block' : 'none';
    }
  }
}

关键改动说明 #

1. 新增分类状态跟踪：添加currentFilter全局变量，记录用户当前选中的分类，默认值为all
2. 更新分类选中逻辑：在分类按钮点击事件中，同步更新currentFilter的值
3. 搜索逻辑升级：
   • 同时判断两个条件：图片名称是否匹配搜索词、图片是否属于当前选中的分类
   • 只有两个条件都满足时，才显示对应的图片

HTML代码保持不变 #

<div class="menu">
  <a href="#" class="btn" data-filter="all" style="background-color: #753CF8;">All</a>
  <a href="#" class="btn" data-filter="water" style="background-color: rgb(48, 117, 163)">Water</a>
  <a href="#" class="btn" data-filter="earth" style="background-color: rgb(63, 121, 25);">Earth</a>
  <a href="#" class="btn" data-filter="fire" style="background-color: maroon;">Fire</a>
</div>

<form>
  <i class="fas fa-search"></i>
  <input type="text" name="" id="search-item" placeholder="Search gallery" onkeyup="search()">
</form>

<div class="box" id="store-items">
  <div class="store-items water ">
    <img src="img/water1.jpg" class="store-img" alt="">
    <P>Ocean</P>
  </div>
  <div class="store-items earth ">
    <img src="img/earth1.jpg" class="store-img" alt="">
    <P>Bridge</P>
  </div>
  <div class="store-items fire ">
    <img src="img/fire1.jpg" class="store-img" alt="">
    <P>Flower Art</P>
  </div>
</div>

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