根据数据属性值显示/隐藏 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(){  

  var selected_products = [];

  $('input[type=checkbox]').each(function(){

    if (this.checked){

      selected_products.push($(this).attr('value'));      

    }

  });

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

  selected_products.filter(function(item){

    $('.box').each(function(){

      if($(this).attr('data-category').split(',').indexOf(item) > -1){

      $(this).show();

      }

    });

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

        

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

Answer 2

您可以执行如下操作：

// this variable stores the categories to be displayed

var displayedCategories = []

// this function updates the products displayed based upon the previous variable

function updateDisplayed() {

  $('.box').each(function(i) {

    var box = $(this)

    var cats = [...box.attr('data-category')]

    box.hide()

    displayedCategories.forEach(function(category){

      if (cats.indexOf(category) >= 0) { box.show() }

    })

  })

}

$(document).ready(function(){

  // everytime you check or uncheck a box

  $('input[name="categories"]').on('change', function() {

    if ($(this).prop('checked')) {

      // if the box is checked, you add to the array of displayables

      displayedCategories.push($(this).val())

    }

    else {

      // if not, you remove

      displayedCategories = displayedCategories.filter(x => x!= $(this).val())

    }

    

    // you update the displayed products

    updateDisplayed()

    

  })

})

.box {

  display: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

        <input type="checkbox" name="categories" value="1"> Category 1 </br>

        <input type="checkbox" name="categories" value="2"> Category 2 </br>

        <input type="checkbox" name="categories" value="3"> Category 3 </br>

        <input type="checkbox" name="categories" value="4"> Category 4 </br>

        <input type="checkbox" name="categories" value="5"> Category 5 </br>