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

Question

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

id我可以使用除了 s之外几乎相同的 s编写四个 jquery 函数id，或者我可以使用变量编写一个 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');
   }
});

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

标签： javascriptjquerywordpress

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>