如何使用复选框过滤多个列表项目?
如何创建2个复选框,显示(即)1.食品和2音乐家......如何使用复选框过滤多个列表项目?
凡
1)如果两个复选框被选中,食品和音乐家都显示;
2)如果食物被检查并且音乐家未被检查,元素仍然可见,因为它包含食物,因为它还包含音乐家;
3)如果音乐家被选中并且食物未被选中,它也是可见的,因为它包含音乐家,尽管它也包含食物;
4)如果食物和音乐家都未选中,则li项消失。
我的HTML是:
<html>
<head>
</head>
<body>
<ul class="filterSection">
<li>
<input checked="true" type="checkbox" value="Food"/>
<label>Food</label>
</li>
<li>
<input checked="true" type="checkbox" value="Musician"/>
<label>Musician</label>
</li>
</ul>
<ul id="itemsToFilter">
<li data-type="Food">Food</li>
<li data-type="Musician">Musician</li>
<li data-type="Food Musician">Food & Musician</li>
<ul>
</body>
</html>
而下面的javascript代码(集成在两个列表如下):
<script>
// get all of our list items
var itemsToFilter = document.querySelectorAll("#itemsToFilter li");
//setup click event handlers on our checkboxes
var checkBoxes = document.querySelectorAll(".filterSection li input");
for (var i = 0; i < checkBoxes.length; i++) {
checkBoxes[i].addEventListener("click", filterItems, false);
checkBoxes[i].checked = true;
}
// the event handler!
function filterItems(e) {
var clickedItem = e.target;
if (clickedItem.checked == true) {
hideOrShowItems(clickedItem.value, "hideItem", "showItem");
} else if (clickedItem.checked == false) {
hideOrShowItems(clickedItem.value, "showItem", "hideItem");
} else {
// deal with the indeterminate state if needed
}
}
// add or remove classes to show or hide our content
function hideOrShowItems(itemType, classToRemove, classToAdd) {
for (var i = 0; i < itemsToFilter.length; i++) {
var currentItem = itemsToFilter[i];
if (currentItem.getAttribute("data-type") == itemType) {
removeClass(currentItem, classToRemove);
addClass(currentItem, classToAdd);
}
}
}
//
// Helper functions for adding and removing class values
//
function addClass(element, classToAdd) {
var currentClassValue = element.className;
if (currentClassValue.indexOf(classToAdd) == -1) {
if ((currentClassValue == null) || (currentClassValue === "")) {
element.className = classToAdd;
} else {
element.className += " " + classToAdd;
}
}
}
function removeClass(element, classToRemove) {
var currentClassValue = element.className;
if (currentClassValue == classToRemove) {
element.className = "";
return;
}
var classValues = currentClassValue.split(" ");
var filteredList = [];
for (var i = 0 ; i < classValues.length; i++) {
if (classToRemove != classValues[i]) {
filteredList.push(classValues[i]);
}
}
element.className = filteredList.join(" ");
}
</script>
我发现,在CSS,你可以做到以下几点:
#itemsToFilter li[data-type*=Food] {background-color: green;}
#itemsToFilter li[data-type*=Musician] {background-color: yellow;}
(星号会导致识别一个或多个数据类型属性)
没有问题存在,所以我很感兴趣的是JavaScript的一部分:
凡
1)如果两个复选框被选中,食品和音乐家都显示;
2)如果食物被检查并且音乐家未被检查,元素仍然可见,因为它包含食物,因为它还包含音乐家;
3)如果音乐家被选中并且食物未被选中,它也是可见的,因为它包含音乐家,尽管它也包含食物;
4)如果食物和音乐家都未选中,则li项消失。
我想要这个,而不必做一个名为'食物音乐家'的新复选框。可以通过添加
#itemsToFilter li[data-type*='Food Musician'] {background:pink;}
所以只能使用复选框“食物”和“音乐家”。
见或遵循http://test.kompagniekistemaker.nl
我的问题有人提出这个例子从Kirupa看完这篇文章:
https://www.kirupa.com/html5/filtering_items_in_a_list.htm
我也发现了这个例子,这是有点儿什么我想:
Filter by multiple data attribute elements
获胜的答案获得一块巧克力。
非常感谢!
尝试修改您的if
声明是这样的:
if (currentItem.getAttribute("data-type").indexOf(itemType) !== -1)
我敢肯定,你知道它在做什么。它会在数据属性中搜索一个子字符串。indexOf()
返回子字符串的第一个字符的位置(如果找到)或-1
(如果未找到子字符串)。它能解决你的问题吗?
一位朋友使用这段javascript解决了这个问题。每件都分开说明。
简而言之: 如果我创建在UL复选框与含有锂元素与类“.itemsToFilter”以下的另一个UL相对应的类的“.filterSection”发生的情况:
- 如果没有选择复选框,如果选择一个或多个复选框会显示特定的上行的一切
- ,就会显示出相应的复选框
-
如果你想在你的UL只有一个锂元素的含量,你可以使用display:none来添加一个'不可见的'多余的li元素:在CSS中的属性,并让它在HTML中被检查=“真”。通过这种方式,看起来只有一个项目的列表中会有一个checked元素,导致单个可见li元素的行为与li元素列表中li元素的行为相同。如果你不这样做,你的一个li元素将永远是可见的,因为当它未被选中时,它将显示一切(上面的规则1)。
var sections; var items;
init();
//初始化函数 功能的init(){ //获取复选框段和物品过滤 段=查询( 'filterSection。'); items = query('。itemsToFilter li');
// Create a section for every group of checkboxes for (var i = 0; i < sections.length; i++) { sections[i] = query('input', sections[i]); // Loop over the checkboxes in a section for (var j = 0; j < sections[i].length; j++) { // Add event listener (filter on change) sections[i][j].addEventListener('change', filter); } }
}
//函数被点击复选框或未点击 函数滤波器()时被调用{ //获取所选择的复选框 变种选择= getSelection();
// Loop over all items for (var i = 0; i < items.length; i++) { // Initially, every item will be shown var show = true; // Get the tags associated with the item var tags = items[i].dataset.type.split(','); // Loop over each tag section for (var j = 0; j < selection.length; j++) { // If the section has no checked boxes, it will be ignored if (selection[j].length == 0) continue; // Hide the item, unless we tell it to be shown later var allow = false; // Loop over the associated tags for (var k = 0; k < tags.length; k++) { // If the tag is also one that has been selected, allow the item to be shown if (selection[j].indexOf(tags[k]) > -1) { allow = true; } } // If one of the tags was disallowed, hide the item. Do not keep checking as this is unnecessary if (!allow) { show = false; break; } } // Add the appropriate class if (!show) items[i].classList.add('hideItem'); else items[i].classList.remove('hideItem'); }
}
//函数来获得所选择的复选框 功能getSelection(){// 在这里,我们将跟踪的检查框 变种选择= [];
// Loop over each section for (var i = 0; i < sections.length; i++) { // Initialize an empty selection list per section selection[i] = []; // Loop over the checkboxes in this section for (var j = 0; j < sections[i].length; j++) { // Get the checkbox var checkbox = sections[i][j]; // If the checkbox is checked, add it to the selection list if (checkbox.checked) selection[i].push(checkbox.value); } } return selection;
}
//效用函数来查询DOM和返回元件 功能查询(Q,容器){ //如果给出没有容器,恢复到整个文档 容器=容器||文件;
// Query the container var results = container.querySelectorAll(q); // Return the results as an array return Array.prototype.slice.call(results);
}
工作实施例:http://www.kompagniekistemaker.nl – Riddlemethis