使用复选框和数据类别过滤产品
Posted
技术标签:
【中文标题】使用复选框和数据类别过滤产品【英文标题】：Filter products with checkbox and data-category 【发布时间】：2021-11-21 13:49:51 【问题描述】：我打算通过显示和隐藏带有复选框的 div 来创建过滤器。
我看过this 之类的帖子，但我还没有达到我期望的结果。这是代码的一部分：
<div class="container">
<h3 style="font-size:14px; font-weight:normal;">Products by Room</h3>
<p style="font-size:12px;"><strong>Filter items by room:</strong></p>
<form>
<label style="font-size:12px;"><input type="checkbox" name="room" value="office" id="red" /> Office</label><br>
<label style="font-size:12px;"><input type="checkbox" name="room" value="bedroom" id="yellow" /> Bedroom</label><br>
<label style="font-size:12px;"><input type="checkbox" name="room" value="living-room" id="pink" /> Living Room</label><br>
<label style="font-size:12px;"><input type="checkbox" name="room" value="dining-room" id="purple" /> Dining Room</label><br>
<label style="font-size:12px;"><input type="checkbox" name="room" value="library" id="green" /> Library</label><br>
<label style="font-size:12px;"><input type="checkbox" name="room" value="hallway" id="other" /> Hallway</label>
</form>
<div class="products-by-room">
<div data-category="office library">Office, Library</div>
<div data-category="office">Office</div>
<div data-category="hallway library">Hallway, Library</div>
<div data-category="living-room dining-room">Living-room & Dining-room</div>
<div data-category="living-room">Living-room</div>
<div data-category="bedroom dining-room">Bedroom & Dining-room</div>
<div data-category="dining room">Dining room</div>
<div data-category="office">Office</div>
<div data-category="bedroom">Bedroom</div>
<div data-category="living-room">Living-room</div>
<div data-category="living-room dining-room office library">Living-room, Dining-room, Office & Library</div>
<div data-category="library">Library</div>
<div data-category="office">Office</div>
<div data-category="bedroom">Bedroom</div>
</div>
</div>
如您所见，在某些 div 中只有一个数据类别：
<div data-category="office">Office</div>
但我也有多个数据类别的 div：
<div data-category="office library">Office & Library</div>
我正在寻找的结果是，当我选中“Office”复选框时，我希望它显示在数据类别属性中包含 office 的所有 div，无论它只是 office 还是 office 和其他房间类型。
所以，如果我选择了复选框办公室，我只想显示以下 div：
<div data-category="office library">Office, Library</div>
<div data-category="office">Office</div>
<div data-category="living-room dining-room office library">Living-room, Dining-room, Office & Library</div>
<div data-category="office">Office</div>
关于如何实现这一点的任何提示？
【问题讨论】：
【参考方案1】：由于您没有提到您使用的是 vannila js 或 jquery，我假设您使用的是 jquery，因为它在您的问题中提到。
我还为每一行添加了 cmets。
jQuery(function() // document ready to process
jQuery('form').find("input").on('change',function() // when the input changes
let selected = []; // init a selected array
jQuery('form').find("input").each(function() // on every input
if(jQuery(this).is(":checked")) // check if the input is checked
selected.push(jQuery(this).val()); // push the selected value to selected array
)
if(!selected.length) // if no items selected
jQuery("div.products-by-room div").show(); // show all
return; // stop code execution
jQuery("div.products-by-room div").hide(); // hide all divs
jQuery("div.products-by-room div").each(function() // take each div
const category = jQuery(this).attr('data-category'); // capture the attribute category
const categorySplitted = category.split(' '); // split each category by space
categorySplitted.forEach((cat)=> // foreach category array
if(selected.indexOf(cat) !== -1) // cross check with selected categories; if selected
jQuery(this).show(); // show the div
);
);
);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h3 style="font-size:14px; font-weight:normal;">Products by Room</h3>
<p style="font-size:12px;"><strong>Filter items by room:</strong></p>
<form>
<label style="font-size:12px;"><input type="checkbox" name="room" value="office" id="red" /> Office</label><br>
<label style="font-size:12px;"><input type="checkbox" name="room" value="bedroom" id="yellow" /> Bedroom</label><br>
<label style="font-size:12px;"><input type="checkbox" name="room" value="living-room" id="pink" /> Living Room</label><br>
<label style="font-size:12px;"><input type="checkbox" name="room" value="dining-room" id="purple" /> Dining Room</label><br>
<label style="font-size:12px;"><input type="checkbox" name="room" value="library" id="green" /> Library</label><br>
<label style="font-size:12px;"><input type="checkbox" name="room" value="hallway" id="other" /> Hallway</label>
</form>
<div class="products-by-room">
<div data-category="office library">Office, Library</div>
<div data-category="office">Office</div>
<div data-category="hallway library">Hallway, Library</div>
<div data-category="living-room dining-room">Living-room & Dining-room</div>
<div data-category="living-room">Living-room</div>
<div data-category="bedroom dining-room">Bedroom & Dining-room</div>
<div data-category="dining room">Dining room</div>
<div data-category="office">Office</div>
<div data-category="bedroom">Bedroom</div>
<div data-category="living-room">Living-room</div>
<div data-category="living-room dining-room office library">Living-room, Dining-room, Office & Library</div>
<div data-category="library">Library</div>
<div data-category="office">Office</div>
<div data-category="bedroom">Bedroom</div>
</div>
</div>【讨论】：
非常感谢您的精彩回答和解释。谢谢！【参考方案2】：考虑以下内容。
$(function()
$("form input[type='checkbox']").change(function()
var selected = [];
$(this).closest("form").find(":checked").each(function(i, el)
selected.push($(el).val());
);
if (selected.length == 0)
$(".products-by-room > div").show();
return;
$(".products-by-room > div").each(function(i, el)
var cat = $(el).data("category").split(" ");
$.each(cat, function(j, c)
if (selected.indexOf(c) == -1)
$(el).hide();
else
$(el).show();
);
);
)
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h3 style="font-size:14px; font-weight:normal;">Products by Room</h3>
<p style="font-size:12px;"><strong>Filter items by room:</strong></p>
<form>
<label style="font-size:12px;"><input type="checkbox" name="room" value="office" id="red" /> Office</label><br>
<label style="font-size:12px;"><input type="checkbox" name="room" value="bedroom" id="yellow" /> Bedroom</label><br>
<label style="font-size:12px;"><input type="checkbox" name="room" value="living-room" id="pink" /> Living Room</label><br>
<label style="font-size:12px;"><input type="checkbox" name="room" value="dining-room" id="purple" /> Dining Room</label><br>
<label style="font-size:12px;"><input type="checkbox" name="room" value="library" id="green" /> Library</label><br>
<label style="font-size:12px;"><input type="checkbox" name="room" value="hallway" id="other" /> Hallway</label>
</form>
<div class="products-by-room">
<div data-category="office library">Office, Library</div>
<div data-category="office">Office</div>
<div data-category="hallway library">Hallway, Library</div>
<div data-category="living-room dining-room">Living-room & Dining-room</div>
<div data-category="living-room">Living-room</div>
<div data-category="bedroom dining-room">Bedroom & Dining-room</div>
<div data-category="dining room">Dining room</div>
<div data-category="office">Office</div>
<div data-category="bedroom">Bedroom</div>
<div data-category="living-room">Living-room</div>
<div data-category="living-room dining-room office library">Living-room, Dining-room, Office & Library</div>
<div data-category="library">Library</div>
<div data-category="office">Office</div>
<div data-category="bedroom">Bedroom</div>
</div>
</div>由于您有多个复选框多个类别，因此您需要执行一些迭代。
您可以以类似的方式使用.filter()。基本上你会显示所有，然后使用.filter() 减少到匹配的项目并隐藏那些。
【讨论】：
非常感谢您的帮助！出于某种原因，当我检查餐厅时它不起作用，它只显示 3 个 div 中的 2 个。尽管如此，还是非常感谢您对我的帮助，我很感激！ @Marília 您有多个版本：“dining room”与“dining-room”，因此您需要选择其中一个。我建议你坚持后者。 你是对的！我必须解决这个问题。非常感谢！以上是关于使用复选框和数据类别过滤产品的主要内容，如果未能解决你的问题，请参考以下文章