根据数据属性值显示/隐藏 div，在 jQuery/JavaScript 中以逗号分隔

Question

我有显示产品列表和类别过滤器的页面。产品可以有多个类别。

网页内容要像

/*Product List */

      <div>

            <div class="box" data-category="1,5"> Product 1 </div>

            <div class="box" data-category="3"> Product 2 </div>

            <div class="box" data-category="1,5,4"> Product 3 </div>

            <div class="box" data-category="3,5"> Product 4 </div>

            <div class="box" data-category="1,2,3,4,5"> Product 5 </div>

            <div class="box" data-category="2"> Product 6 </div>

            <div class="box" data-category="3,4"> Product 7 </div>

            <div class="box" data-category="5,1"> Product 8 </div>

        </div>

   /*Filter for category */

        <input type="checkbox" name="cid[]" value="1"> Category 1 </br>

        <input type="checkbox" name="cid[] "value="2"> Category 2 </br>

        <input type="checkbox" name="cid[]" value="3"> Category 3 </br>

        <input type="checkbox" name="cid[]" value="4"> Category 4 </br>

        <input type="checkbox" name="cid[]" value="5"> Category 5 </br>

在“类别”上，如果我选择类别 1 和 5，则选择它，则它仅显示产品 1，但它应显示具有类别 1 或类别 5 的所有产品

此代码的工作方式类似于 AND 条件，如何申请 OR 条件。因此，如果选择了3个类别，则显示已选择类别的所有产品。

$('.box').hide();

$('[data-category="1"],[data-category="5"]').show(); 

Answer 1

您可以通过像这样的简单步骤来处理您的问题陈述。步骤 1：将事件应用于复选框。检查复选框是否已选中，并将选中的复选框 ID 存储到变量中。changeselected_products步骤2：循环访问每个产品列表，并通过拆分其属性来查看数组中是否存在它。并相应地显示/隐藏。selected_productsdata-category$('input[type=checkbox]').change(function(){&nbsp;&nbsp;&nbsp; var selected_products = [];&nbsp; $('input[type=checkbox]').each(function(){&nbsp; &nbsp; if (this.checked){&nbsp; &nbsp; &nbsp; selected_products.push($(this).attr('value'));&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }&nbsp; });&nbsp; $('.box').hide();&nbsp; selected_products.filter(function(item){&nbsp; &nbsp; $('.box').each(function(){&nbsp; &nbsp; &nbsp; if($(this).attr('data-category').split(',').indexOf(item) > -1){&nbsp; &nbsp; &nbsp; $(this).show();&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="box" data-category="1,5"> Product 1 </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="box" data-category="3"> Product 2 </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="box" data-category="1,5,4"> Product 3 </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="box" data-category="3,5"> Product 4 </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="box" data-category="1,2,3,4,5"> Product 5 </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="box" data-category="2"> Product 6 </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="box" data-category="3,4"> Product 7 </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="box" data-category="5,1"> Product 8 </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" name="cid[]" value="1"> Category 1 </br>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" name="cid[] "value="2"> Category 2 </br>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" name="cid[]" value="3"> Category 3 </br>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" name="cid[]" value="4"> Category 4 </br>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" name="cid[]" value="5"> Category 5 </br>

Answer 2

您可以执行如下操作：// this variable stores the categories to be displayedvar displayedCategories = []// this function updates the products displayed based upon the previous variablefunction updateDisplayed() {&nbsp; $('.box').each(function(i) {&nbsp; &nbsp; var box = $(this)&nbsp; &nbsp; var cats = [...box.attr('data-category')]&nbsp; &nbsp; box.hide()&nbsp; &nbsp; displayedCategories.forEach(function(category){&nbsp; &nbsp; &nbsp; if (cats.indexOf(category) >= 0) { box.show() }&nbsp; &nbsp; })&nbsp; })}$(document).ready(function(){&nbsp; // everytime you check or uncheck a box&nbsp; $('input[name="categories"]').on('change', function() {&nbsp; &nbsp; if ($(this).prop('checked')) {&nbsp; &nbsp; &nbsp; // if the box is checked, you add to the array of displayables&nbsp; &nbsp; &nbsp; displayedCategories.push($(this).val())&nbsp; &nbsp; }&nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; // if not, you remove&nbsp; &nbsp; &nbsp; displayedCategories = displayedCategories.filter(x => x!= $(this).val())&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // you update the displayed products&nbsp; &nbsp; updateDisplayed()&nbsp; &nbsp;&nbsp;&nbsp; })}).box {&nbsp; display: none;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="box" data-category="1,5"> Product 1 </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="box" data-category="3"> Product 2 </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="box" data-category="1,5,4"> Product 3 </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="box" data-category="3,5"> Product 4 </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="box" data-category="1,2,3,4,5"> Product 5 </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="box" data-category="2"> Product 6 </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="box" data-category="3,4"> Product 7 </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="box" data-category="5,1"> Product 8 </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" name="categories" value="1"> Category 1 </br>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" name="categories" value="2"> Category 2 </br>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" name="categories" value="3"> Category 3 </br>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" name="categories" value="4"> Category 4 </br>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" name="categories" value="5"> Category 5 </br>