:Contains不能处理变量而只能处理文本

Question

大家好，我有一个搜索栏和一些引导卡，我想做的是让所有的卡显示无，但一旦我在搜索栏(keyup)上输入，我想只显示包含相同单词的卡。我感觉卡住了，所以一些帮助或任何建议将是很棒的。谢谢。

例子

$("#search_value").keyup(function() {
let searchInputValue = $("#search_value").val();
$("div.card-body h4.card-title:contains('" + searchInputValue + "')").css("display", "flex");
})

div.card-body h4.card-title {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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=""></button> </form>
<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>

Contains适用于字符串，但不适用于变量。

Answer 1

似乎是一个逃逸问题。

使用括号

可以工作

$("#search_value").keyup(function() {
let searchInputValue = $(this).val();
let titleContain = $(`div.card-body h4.card-title:contains('${searchInputValue}')`);
console.log(searchInputValue)
if (searchInputValue.length > 3)
titleContain.css("display", "flex");
else
titleContain.css("display", "none");
})

div.card-body h4.card-title {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="search_value" type="text" class="form-control" name="search_articles" placeholder="Search...">
<button class="search-icon"><img src="./search-icon.png" alt=""></button> </form>
<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>