javascript - 如何选择已单击复选框的值？

Question

我有四个复选框。基于选中(或未选中)的复选框，我需要 addClass (或 removeClass )类为 filter-result 的任何特定 div 的 css 类AND 包含一个带有 class 的子 div与选中的复选框的值相匹配。 (这是为了显示/隐藏搜索结果，因此选中/取消选中该框将显示/隐藏具有相应类别的各种搜索结果。)

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

这是 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，它可以工作，但是 super 笨重:

$('#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');
   }
});

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

Answer 1

选择器的正确语法是:

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

编辑---

以下代码段应模拟您的代码添加一个 bakground 作为示例，这是您想要实现的目标吗？

$(".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>