Làm thế nào để - Bộ lọc các phần tử
Tìm hiểu cách lọc phần tử DIV dựa trên tên lớp của nó.
Lọc các phần tử DIV
xe BMW
trái cam
Volvo
màu đỏ
Mustang
Màu xanh lam
Con mèo
Chú chó
Dưa gang
Quả kiwi
Trái chuối
Chanh vàng
Con bò
Tạo phần tử DIV có thể lọc
Bước 1) Thêm HTML:
Thí dụ
<!-- Control buttons -->
<div id="myBtnContainer">
<button
class="btn active" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('cars')"> Cars</button>
<button class="btn" onclick="filterSelection('animals')"> Animals</button>
<button class="btn" onclick="filterSelection('fruits')"> Fruits</button>
<button class="btn" onclick="filterSelection('colors')"> Colors</button>
</div>
<!-- The filterable elements. Note that
some have multiple class names (this can be used if they belong to multiple
categories) -->
<div
class="container">
<div
class="filterDiv cars">BMW</div>
<div class="filterDiv colors
fruits">Orange</div>
<div class="filterDiv cars">Volvo</div>
<div class="filterDiv colors">Red</div>
<div class="filterDiv cars
animals">Mustang</div>
<div class="filterDiv colors">Blue</div>
<div class="filterDiv animals">Cat</div>
<div class="filterDiv
animals">Dog</div>
<div class="filterDiv fruits">Melon</div>
<div class="filterDiv fruits animals">Kiwi</div>
<div class="filterDiv
fruits">Banana</div>
<div class="filterDiv fruits">Lemon</div>
<div class="filterDiv animals">Cow</div>
</div>
Bước 2) Thêm CSS:
Thí dụ
.container {
overflow: hidden;
}
.filterDiv {
float: left;
background-color: #2196F3;
color: #ffffff;
width: 100px;
line-height: 100px;
text-align: center;
margin: 2px;
display: none; /* Hidden by default */
}
/* The "show" class is
added to the filtered elements */
.show {
display: block;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color:
#f1f1f1;
cursor: pointer;
}
/* Add a light grey
background on mouse-over */
.btn:hover {
background-color: #ddd;
}
/* Add a dark background to
the active button */
.btn.active {
background-color: #666;
color: white;
}
Bước 3) Thêm JavaScript:
Thí dụ
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
// Add the "show" class (display:block) to the filtered elements, and remove
the "show" class from the elements that are not selected
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i],
"show");
if (x[i].className.indexOf(c) > -1)
w3AddClass(x[i], "show");
}
}
// Show filtered
elements
function w3AddClass(element,
name) {
var i, arr1, arr2;
arr1 = element.className.split("
");
arr2 = name.split(" ");
for (i = 0; i < arr2.length;
i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
// Hide elements that are not selected
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while
(arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class
to the current control button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns =
btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++)
{
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}