Question

您好我正在开发过滤应用程序。请参阅我的html和js代码

＆＃13;

 jQuery(document).ready(function($){
  
    $(".color-label").on("click",function(){
	 
	  var color_box_val=  $(this).find('.color-box').val();
	  $('.test-li').hide();
	  $('div:contains('+color_box_val+')').closest('.test-li').show();
	});
 
 });

＆＃13;

.hidden-color{
     display:none;
   }

＆＃13;

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<label class="color-label">Red<input type="checkbox" class="color-box" value="red"/></label>
<label class="color-label">Black <input type="checkbox" class="color-box" value="Black"/></label>


<ul>
 <li class="test-li"> 
   <div class="test-div"> 
     <p class="hidden-color">red</p> 
	 red poduct
  </div>
 </li>
  <li class="test-li"> 
   <div class="test-div"> 
     <p class="hidden-color">Black</p> 
	 black Product
  </div>
 </li>
 <li class="test-li"> 
   <div class="test-div"> 
     <p class="hidden-color">Blue</p> 
	 blue Product
  </div>
 </li>

＆＃13;

所以我在这里做的是当客户点击黑色时，它会显示黑色产品。如果客户点击红色和黑色，那么我们需要同时显示两者，如果客户没有勾选任何内容，那么我们需要显示所有产品。

但是我坚持了一些观点。在点击这两个时，我怎样才能显示红色和黑色？目前，它显示基于新单击的复选框的结果。如果他们取消了所有的东西，那么我需要展示所有的盒子。请建议。

Answer 1

我建议更改的第一件事是如何在列表项中存储颜色数据。而不是将它们存储在隐藏的段落元素中，为什么不将它们存储为HTML5数据属性？

完成后，执行您想要的操作非常简单：基本上是OR操作，即勾选红色和黑色时，您希望显示红色或<的项目/ strong>黑色。

逻辑如下：

您在所有复选框上收听.change()事件

触发此事件时，您希望收集所有这些复选框的值，但前提是它们已被选中。这是通过使用.filter(':checked')选中已选中的复选框和.map()来返回数组来完成的。

接下来，遍历所有列表项。如果在数组中找到了data-color值，则显示它们。否则你隐藏它们。

所有这些逻辑都包含在条件语句中，该条件语句检查是否过滤了任何复选框：

如果没有选中，我们不希望任何过滤

如果选中了一个或多个，我们使用上述过滤逻辑
执行过滤

更新：我使用.toLowerCase()将您的所有颜色值转换为小写，因为根据您的问题，我可以看到值可以选择大写。

请参阅下面的概念验证示例：

＆＃13;
＆＃13;
jQuery(document).ready(function($) { // Listen to change event $('.color-box').change(function() { // Store checked checkboxes var $checked = $('.color-box').filter(':checked'); if ($checked.length) { // Perform filtering if one or more is checked // Collect ALL values from all .color-box into an array var colors = $checked.map(function() { return $(this).val().toLowerCase(); }).get(); // Iterate through each list item and evaluate $('.test-li').each(function() { var $t = $(this); if (colors.indexOf($t.data('color').toLowerCase()) >= 0) { $t.show(); } else { $t.hide(); } }); } // If nothing is checked, show all list items else { $('.test-li').show(); } }); });
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <label class="color-label">Red<input type="checkbox" class="color-box" value="red"/></label> <label class="color-label">Black <input type="checkbox" class="color-box" value="Black"/></label> <ul> <li class="test-li" data-color="red"> <div class="test-div"> red Product </div> </li> <li class="test-li" data-color="black"> <div class="test-div"> black Product </div> </li> <li class="test-li" data-color="blue"> <div class="test-div"> blue Product </div> </li>
＆＃13;
＆＃13;
＆＃13;

根据复选框值usig Jquery显示和隐藏类

1 个答案: