添加不区分大小写搜索与可点击图片后搜索功能失效求助

核心问题定位 #

给图片包裹<a>标签后，JS里的选择器.image_container > img失效了——这个选择器仅匹配.image_container的直接子元素中的img，但现在img是<a>的子元素，不再是.image_container的直接子元素，导致querySelectorAll找不到任何img，搜索功能自然失效。

修复方案（二选一即可） #

方案1：修改选择器匹配所有后代img

把JS中这行代码：

var images = document.querySelectorAll(".image_container > img");

改为：

var images = document.querySelectorAll(".image_container img");

这样就能匹配.image_container下所有层级的img元素。但注意：此时隐藏的是img，<a>标签仍会留在页面上，可能出现空白占位。

方案2：控制<a>标签的显示隐藏（更优）

直接操作包裹img的<a>标签，避免页面空白占位：

1. 修改JS选择器，选中.image_container下的所有<a>标签：

var links = document.querySelectorAll(".image_container a");

2. 调整逻辑，通过a标签内的img获取data-tags，控制a标签的显示状态：

function search(){
    var searchText = document.getElementById("searchInput").value.toLowerCase();
    var links = document.querySelectorAll(".image_container a");

    if(searchText.length > 0){
        links.forEach((link) => {
            const img = link.querySelector("img");
            const tags = (img?.dataset.tags || "").toLowerCase();
            link.classList.add("hide");
            if(tags.includes(searchText)){
                link.classList.remove("hide");
            }
        });
    }else{
        links.forEach((link) => {
            link.classList.remove("hide");
        });
    }
}

额外CSS修复 #

你的CSS中.hide的大括号未闭合，补上闭合符号：

.hide {
  display:none;
}

• 解耦HTML与JS：移除input标签上的onkeyup="search()"，改用JS事件监听，代码更易维护：

document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById("searchInput");
    searchInput.addEventListener('input', search); // input事件能捕获粘贴等操作，比keyup更灵敏
});

• 缓存DOM元素：将常用DOM元素提前缓存，避免每次搜索重复查询DOM：

const searchInput = document.getElementById("searchInput");
const links = document.querySelectorAll(".image_container a");

function search(){
    var searchText = searchInput.value.toLowerCase();
    // 后续直接使用缓存的links即可
}

• 避免报错风险：处理img不存在或data-tags为空的情况，用img?.dataset.tags || ""防止读取undefined属性报错。
• 简化判断逻辑：用includes()替代indexOf() > -1，代码可读性更强：

if(tags.includes(searchText))

内容的提问来源于stack exchange，提问作者Pavel Patočka