基于复选框值显示和隐藏值usig jquery

Question

嗨，目前我正在开发一个过滤应用程序。请参阅我的HTML和JS代码

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

.hidden-color{ 
 
    display:none; 
 
    }

<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> 
 
\t red poduct 
 
    </div> 
 
</li> 
 
    <li class="test-li"> 
 
    <div class="test-div"> 
 
    <p class="hidden-color">Black</p> 
 
\t black Product 
 
    </div> 
 
</li> 
 
<li class="test-li"> 
 
    <div class="test-div"> 
 
    <p class="hidden-color">Blue</p> 
 
\t blue Product 
 
    </div> 
 
</li>

所以这是IAM时做客户点击黑色的，那么它会显示黑色的产品。如果客户点击红色和黑色，那么我们需要同时显示，如果客户没有打勾，我们需要显示所有产品。

但我坚持了一些观点。在这里，如何在点击时同时显示红色和黑色？目前它显示基于新点击的复选框的结果。此外，如果他们解决每一件事，那么我需要显示所有的框。请建议。

Answer 1

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

一旦做到这一点，这是很简单的事情，你打算什么：这基本上是一个OR操作，也就是说，红色和黑色的打勾，你想显示为红色或黑色的物品。

的逻辑如下：

1. 你听.change()事件上的所有
2. 当这个事件被触发，你要收集所有这些复选框的值的复选框，但只有当他们被检查。这是通过使用.filter(':checked')来选择复选框和.map()来返回数组。
3. 接下来，遍历所有列表项。如果在数组中找到它们的data-color值，则显示它们。否则，你会隐藏它们。

而这一切的逻辑来检查，如果任何复选框的过滤条件语句中包裹：

• 如果没有被选中，我们不希望任何过滤
• 如果一个或多个我们使用上述过滤逻辑执行过滤

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

见下验证的概念例如：

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

 

 
    }); 
 

 
});

<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>