按類別篩選選擇

Question

我正在按類別進行過濾

如果我使用（ cat1 , cat2 ）設置數據屬性，我的問題

它沒有顯示

第一個解決方案：我嘗試使用 include 方法，但問題是數據屬性中有兩個詞

第二種解決方案：我嘗試在條件下使用問題索引，否則他為所有 div 添加隱藏

 var ext = ["cat1", "cat2", "cat3", "cat1"]; $("#ddlViewBy").on("change", function(e) { var name = $("#ddlViewBy option:selected").text(); const divs = document.querySelectorAll('.full-image'); divs.forEach(div => { div.classList.remove('hidden'); }); if (name == "Categorie") { divs.forEach(div => { length =ext.length; while(length--) { if (div.dataset['image'].indexOf(ext[length])!=-1) { div.classList.add("show"); } else { div.classList.add("hidden"); } } }); } });

 .show { display: block; } .hidden { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="ddlViewBy"> <option value="1">all</option> <option value="1">Categorie 1</option> </select> <div class="full-image" data-id="2" data-image="cat1">aa<img src="" /> </div> <div class="full-image" data-id="3" data-image="cat1">bb<img src="" /> </div> <div class="full-image" data-id="4" data-image="cat1">cc<img src="" /> </div> <div class="full-image" data-id="5" data-image="cat1 cat2">dd<img src="" /> </div> <div class="full-image" data-id="5" data-image="cat1,cat2">oo<img src="" /> </div> <div class="full-image" data-id="6" data-image="cat1">ccs<img src="" /> </div> <div class="full-image" data-id="7" data-image="cat1">yy<img src="" /> </div>

Answer 1

我更新了你的例子。 代碼中的說明

 $("#ddlViewBy").on("change", function(e) { // getting a select value could be '', '1', '2' const value = e.target.value; // getting all divs const divs = document.querySelectorAll('.full-image'); // looping div divs.forEach(div => { // if value is empty (this means !value will be true) than all divs should be visible // or, this or means than value is `1` or `2`, so in this case // if data-image includes `cat${value}` than display it if (!value || div.dataset.image.includes(`cat${value}`)) { div.classList.remove('hidden'); } else { // otherwise - hide div.classList.add('hidden'); } }); });

 .show { display: block; } .hidden { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="ddlViewBy"> <option value="">all</option> <option value="1">Categorie 1</option> <option value="2">Categorie 2</option> </select> <div class="full-image" data-id="2" data-image="cat1">aa<img src="" /> </div> <div class="full-image" data-id="3" data-image="cat1">bb<img src="" /> </div> <div class="full-image" data-id="4" data-image="cat1">cc<img src="" /> </div> <div class="full-image" data-id="5" data-image="cat1 cat2">dd<img src="" /> </div> <div class="full-image" data-id="5" data-image="cat1,cat2">oo<img src="" /> </div> <div class="full-image" data-id="6" data-image="cat1">ccs<img src="" /> </div> <div class="full-image" data-id="7" data-image="cat1">yy<img src="" /> </div>

Answer 2

您不應該對所有選項具有相同的值。 您可以使用以選擇器結尾的屬性根據當前選擇的值添加/刪除單個類。

嘗試以下方式：

 $("#ddlViewBy").on("change", function(e) { var val = $("#ddlViewBy option:selected").val(); const divs = document.querySelectorAll('.full-image'); if(val == 'all') $('.full-image').removeClass('hidden'); else{ $('.full-image').addClass('hidden'); $(`[data-image$=${val}]`).removeClass('hidden'); //notice use of template string using back tick (``) } });

 .hidden { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="ddlViewBy"> <option value="all">all</option> <option value="cat1">Categorie 1</option> <option value="cat2">Categorie 2</option> <option value="cat3">Categorie 3</option> </select> <div class="full-image" data-id="2" data-image="cat1">aa<img src=""/></div> <div class="full-image" data-id="3" data-image="cat1">bb<img src=""/></div> <div class="full-image" data-id="4" data-image="cat1">cc<img src=""/></div> <div class="full-image" data-id="5" data-image="cat1 cat2">dd<img src="" /></div> <div class="full-image" data-id="5" data-image="cat1,cat2">oo<img src="" /></div> <div class="full-image" data-id="6" data-image="cat1">ccs<img src="" /></div> <div class="full-image" data-id="7" data-image="cat1">yy<img src="" /></div> <div class="full-image" data-id="5" data-image="cat3">c3<img src="" /></div> <div class="full-image" data-id="6" data-image="cat3">c33<img src="" /></div> <div class="full-image" data-id="7" data-image="cat3">c333<img src="" /></div>

Answer 3

 var ext = ["cat1", "cat2", "cat3", "cat1"]; $("#ddlViewBy").on("change", function(e) { var name = $(this).val(); if(name == "1"){ $('.full-image').removeClass('hidden'); return; } $('.full-image').addClass('hidden'); $('.full-image').each(function(){ $(`[data-image*=${name}]`).removeClass('hidden'); }); });

 .hidden { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="ddlViewBy"> <option value="1">all</option> <option value="cat1">Category 1</option> <option value="cat2">Category 2</option> </select> <div class="full-image" data-id="2" data-image="cat1">aa<img src="" /> </div> <div class="full-image" data-id="3" data-image="cat1">bb<img src="" /> </div> <div class="full-image" data-id="4" data-image="cat1">cc<img src="" /> </div> <div class="full-image" data-id="5" data-image="cat1 cat2">dd<img src="" /> </div> <div class="full-image" data-id="5" data-image="cat1,cat2">oo<img src="" /> </div> <div class="full-image" data-id="6" data-image="cat1">ccs<img src="" /> </div> <div class="full-image" data-id="7" data-image="cat1">yy<img src="" /> </div>

Answer 4

在 JS 中更簡單：

 const s_ddlViewBy = document.querySelector('#ddlViewBy') , s_divCat = document.querySelectorAll('.full-image') ; s_ddlViewBy.oninput=_=>{ let sCat = s_ddlViewBy.value ? 'cat'+s_ddlViewBy.value : '' s_divCat.forEach(elm=>{ if (elm.dataset.image.includes(sCat)) { elm.classList.remove('hidden') } else { elm.classList.add('hidden') } }) }

 .hidden { display: none; }

 <select id="ddlViewBy"> <option value="">all</option> <option value="1">Categorie 1</option> <option value="2">Categorie 2</option> </select> <div class="full-image" data-id="2" data-image="cat1" >--aa c1 <img src="" /> </div> <div class="full-image" data-id="3" data-image="cat2" >--bb c2 <img src="" /> </div> <div class="full-image" data-id="4" data-image="cat1" >--cc c1 <img src="" /> </div> <div class="full-image" data-id="5" data-image="cat1 cat2">--dd c1 c2 <img src="" /> </div> <div class="full-image" data-id="5" data-image="cat1,cat2">--oo c1 c2 <img src="" /> </div> <div class="full-image" data-id="6" data-image="" >--xx no cat<img src="" /> </div> <div class="full-image" data-id="7" data-image="cat2" >--yy c2 <img src="" /> </div>