jQuery :contains选择器使用变量失效问题求助——实现搜索栏筛选Bootstrap卡片功能

看起来你已经找对了方向，但有几个小问题导致功能没正常工作，咱们一步步修正：

首先，先明确核心问题 #

1. 你当前隐藏的是卡片标题而不是整个卡片，不符合需求里"默认隐藏所有卡片"的要求
2. 使用:contains拼接变量的方式有语法风险（比如搜索值含引号会报错），而且:contains默认是区分大小写的，用户体验不好
3. 没有处理"搜索框清空时显示所有卡片"的场景，也没有每次搜索前重置卡片状态

修正后的完整代码 #

HTML部分（修正卡片结构，确保是标准Bootstrap卡片） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 引入Bootstrap样式（如果之前没加的话） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

<form action="">
    <input id="search_value" type="text" class="form-control" name="search_articles" placeholder="Search...">
    <button class="search-icon"><img src="./search-icon.png" alt="Search"></button>
</form>

<!-- 标准Bootstrap卡片结构，每个卡片用.card包裹 -->
<div class="card mb-3">
    <div class="card-body">
        <h4 class="card-title pt-3 pb-3"><a href="./article-template.html">article about videogames</a></h4>
        <p class="card-text text-muted hide-card-text-mobile">In our last few articles...</p>
    </div>
</div>
<div class="card mb-3">
    <div class="card-body">
        <h4 class="card-title pt-3 pb-3"><a href="./article-template.html">article about programming</a></h4>
        <p class="card-text text-muted hide-card-text-mobile">Learn how to code...</p>
    </div>
</div>
<div class="card mb-3">
    <div class="card-body">
        <h4 class="card-title pt-3 pb-3"><a href="./article-template.html">article about cooking</a></h4>
        <p class="card-text text-muted hide-card-text-mobile">Delicious recipes for beginners...</p>
    </div>
</div>

CSS部分（默认隐藏所有卡片） #

/* 默认隐藏所有Bootstrap卡片 */
.card {
    display: none;
}

JavaScript部分（修正搜索逻辑） #

$("#search_value").keyup(function() { 
    // 获取搜索值，去除首尾空格并转为小写，实现不区分大小写搜索
    let searchInputValue = $.trim($(this).val()).toLowerCase();
    
    // 每次搜索前先隐藏所有卡片，重置状态
    $(".card").hide();
    
    // 处理搜索框为空的情况：显示所有卡片
    if (!searchInputValue) {
        $(".card").show();
        return;
    }
    
    // 遍历所有卡片标题，检查是否包含搜索内容
    $(".card .card-title").each(function() {
        // 获取标题文本并转为小写
        let titleText = $(this).text().toLowerCase();
        // 判断标题是否包含搜索值
        if (titleText.includes(searchInputValue)) {
            // 显示当前标题所在的整个卡片
            $(this).closest(".card").show();
        }
    });
});

关键改进点 #

• 目标正确：现在隐藏/显示的是整个.card元素，完全符合需求
• 鲁棒性更高：用$.trim()去除冗余空格，转小写实现不区分大小写搜索，避免用户输入大小写导致匹配失败
• 状态重置：每次keyup先隐藏所有卡片，再显示匹配项，避免残留之前的显示状态
• 无语法风险：不用字符串拼接选择器，而是通过遍历判断，避免搜索值含特殊字符导致的语法错误
• 空值处理：搜索框清空时自动显示所有卡片，提升用户体验

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