如何选择单击的复选框的值?

Question

我有四个复选框。根据选中(或未选中(的复选框，我需要将 css 类addClass(或removeClass(到任何具有filter-resultAND 包含子div 的子div，其class与选中的复选框的值匹配。(这是为了显示/隐藏搜索结果，因此选中/取消选中这些框将显示/隐藏具有相应类的各种搜索结果。

我可以使用除id之外几乎相同的ids编写四个 jquery 函数，或者我可以使用变量编写一个 jquery 函数。出于显而易见的原因，我宁愿只写一个。我是jQuery，JavaScript，PHP等的新手，所以我希望我的错误在这里非常基本。

这是 HTML/PHP：

<!-- HTML for the checkboxes -->
<label>
<input type="checkbox" class="filterBox" value="devotion" id="toggleDevotion" checked/> Devotions
</label>
<label>
<input type="checkbox" class="filterBox" value="blog" id="toggleBlog" checked/> Blog Posts
</label>
<label>
<input type="checkbox" class="filterBox" value="product" id="toggleProduct" checked/> Products
</label>
<label>
<input type="checkbox" class="filterBox" value="program" id="toggleProgram" checked/> Programs
</label>
<!-- HTML/PHP for the wordpress search results -->
<div class="rowSectionInner results-container">
<?php if (have_posts() && strlen(trim(get_search_query())) != 0 ) { ?>
<?php while (have_posts()) { the_post(); ?>
<?php // Render a separation line. ?>
<?php if ($hasLoopedOnce) { ?>
<?php } $hasLoopedOnce = true; ?>
<?php // Render the search result. ?>
<div class="row justify-content-md-center filter-result">
<div class="col-md-7">
<article>
. . . . . . . . . . . . . . .
<div class="siteSearch_date previewDate">
<?php echo get_the_date(); ?> <?php echo rename_post_types(get_post_type()); ?>
</div>
. . . . . . . . . . . . . . .
</article>
</div>
</div>
<?php } ?>
<?php } ?>
</div>

这是我写的jQuery，可以工作，但超级笨重：

$('#toggleDevotion').click(function() {
if( $(this).is(':checked')) {
$('.siteSearch_date:contains("Devotion")').closest('.filter-result').removeClass('remove');
} else {
$('.siteSearch_date:contains("Devotion")').closest('.filter-result').addClass('remove');
}
if ($(".results-container").children().length == $(".results-container").children(".remove").length) {
$(".no-results").css("display", "block");
$("#wrapper").css({"display": "flex", "flex-direction": "column"});
$("#container").css("flex-grow", "1");
} else {
$(".no-results").css("display", "none");
}
}); 
$('#toggleBlog').click(function() {
if( $(this).is(':checked')) {
$('.siteSearch_date:contains("Blog")').closest('.filter-result').removeClass('remove');
} else {
$('.siteSearch_date:contains("Blog")').closest('.filter-result').addClass('remove');
}
if ($(".results-container").children().length == $(".results-container").children(".remove").length) {
$(".no-results").css("display", "block");
} else {
$(".no-results").css("display", "none");
}
}); 
$('#toggleProduct').click(function() {
if( $(this).is(':checked')) {
$('.siteSearch_date:contains("Product")').closest('.filter-result').removeClass('remove');
} else {
$('.siteSearch_date:contains("Product")').closest('.filter-result').addClass('remove');
}
if ($(".results-container").children().length == $(".results-container").children(".remove").length) {
$(".no-results").css("display", "block");
} else {
$(".no-results").css("display", "none");
}
}); 
$('#toggleProgram').click(function() {
if( $(this).is(':checked')) {
$('.siteSearch_date:contains("Program")').closest('.filter-result').removeClass('remove');
} else {
$('.siteSearch_date:contains("Program")').closest('.filter-result').addClass('remove');
}
if ($(".results-container").children().length == $(".results-container").children(".remove").length) {
$(".no-results").css("display", "block");
} else {
$(".no-results").css("display", "none");
}
});

这是我编写的jQuery，用于尝试将主要的显示/隐藏切换组合成一个函数：

$(".filterBox").click(function() {  
var $lemon = $(this).val();
if( $(this).is(':checked')) {
$(".siteSearch_date:contains($lemon)").closest('.filter-result').removeClass('remove');
} else {
$(".siteSearch_date:contains($lemon)").closest('.filter-result').addClass('remove');
}
});

我希望它从具有.filter-result类的div 中应用或删除remove类 - 但我没有得到任何回应，包括控制台。我错过了什么？

Answer 1

选择器的正确语法是：

$(".siteSearch_date:contains('"+$lemon+"')")

编辑---

以下代码片段应模拟您的代码添加烘焙地作为示例，这是您想要实现的吗？

$(".filterBox").click(function() {  
var $lemon = $(this).val();
if( $(this).is(':checked')) {
$(".siteSearch_date:contains('"+$lemon+"')").closest('.filter-result').removeClass('remove');
} else {  $(".siteSearch_date:contains('"+$lemon+"')").closest('.filter-result').addClass('remove');
}
});

.remove{
background-color: red;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="checkbox" class="filterBox" value="devotion" id="toggleDevotion" checked/> Devotions
</label>
<label>
<input type="checkbox" class="filterBox" value="blog" id="toggleBlog" checked/> Blog Posts
</label>
<label>
<input type="checkbox" class="filterBox" value="product" id="toggleProduct" checked/> Products
</label>
<label>
<input type="checkbox" class="filterBox" value="program" id="toggleProgram" checked/> Programs
</label>
<div class="row justify-content-md-center filter-result">
<div class="col-md-7">
<article>
. . . . . . . . . . . . . . .
<div class="siteSearch_date previewDate">
product
</div>
. . . . . . . . . . . . . . .
</article>
</div>
</div>
<div class="row justify-content-md-center filter-result">
<div class="col-md-7">
<article>
. . . . . . . . . . . . . . .
<div class="siteSearch_date previewDate">
blog
</div>
. . . . . . . . . . . . . . .
</article>
</div>
</div>
<div class="row justify-content-md-center filter-result">
<div class="col-md-7">
<article>
. . . . . . . . . . . . . . .
<div class="siteSearch_date previewDate">
product
</div>
. . . . . . . . . . . . . . .
</article>
</div>
</div>
<div class="row justify-content-md-center filter-result">
<div class="col-md-7">
<article>
. . . . . . . . . . . . . . .
<div class="siteSearch_date previewDate">
program
</div>
. . . . . . . . . . . . . . .
</article>
</div>
</div>
<div class="row justify-content-md-center filter-result">
<div class="col-md-7">
<article>
. . . . . . . . . . . . . . .
<div class="siteSearch_date previewDate">
devotion
</div>
. . . . . . . . . . . . . . .
</article>
</div>
</div>