亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

根據數據屬性值顯示/隱藏 div，在 jQuery/JavaScript 中以逗號分隔

根據數據屬性值顯示/隱藏 div，在 jQuery/JavaScript 中以逗號分隔

蠱毒傳說 2022-09-29 15:39:59
我有顯示產品列表和類別過濾器的頁面。產品可以有多個類別。網頁內容要像/*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(); 
查看完整描述

2 回答

?
拉莫斯之舞

TA貢獻1820條經驗 獲得超10個贊

您可以通過像這樣的簡單步驟來處理您的問題陳述。


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


查看完整回答
反對 回復 2022-09-29
?
慕勒3428872

TA貢獻1848條經驗 獲得超6個贊

您可以執行如下操作：


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


查看完整回答
反對 回復 2022-09-29
  • 2 回答
  • 0 關注
  • 131 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號