Lọc yếu tố

Học cách lọc DIV dựa trên tên lớp.

Tạo các yếu tố DIV có thể lọc

Bước 1 - Thêm HTML:

<!-- Nút điều khiển -->
<div id="myBtnContainer">
  <button class="btn active" onclick="filterSelection('all')"> Hiển thị tất cả</button>
  <button class="btn" onclick="filterSelection('cars')"> Xe cộ</button>
  <button class="btn" onclick="filterSelection('animals')"> Động vật</button>
  <button class="btn" onclick="filterSelection('fruits')"> Trái cây</button>
  <button class="btn" onclick="filterSelection('colors')"> Màu sắc</button>
</div>
<!-- Các yếu tố có thể lọc. Vui lòng chú ý, một số yếu tố có nhiều tên lớp (nếu chúng thuộc nhiều loại, bạn có thể sử dụng các tên lớp này) -->
<div class="container">
  <div class="filterDiv cars">BMW</div>
  <div class="filterDiv colors fruits">Cam</div>
  <div class="filterDiv cars">Volvo</div>
  <div class="filterDiv colors">Đỏ</div>
  <div class="filterDiv cars">Ford</div>
  <div class="filterDiv colors">Xanh dương</div>
  <div class="filterDiv animals">Mèo</div>
  <div class="filterDiv animals">Chó</div>
  <div class="filterDiv fruits">Dưa hấu</div>
  <div class="filterDiv fruits animals">Kiwi</div>
  <div class="filterDiv fruits">Quả chuối</div>
  <div class="filterDiv fruits">Lê</div>
  <div class="filterDiv animals">Bò</div>
</div>

Bước 2 - Thêm CSS:

.container {
  dư lượng: ẩn;
}
.filterDiv {
  thuộc tính: trái;
  màu nền: #2196F3;
  màu: #ffffff;
  chiều rộng: 100px;
  chiều cao dòng: 100px;
  canh giữa văn bản: giữa;
  khoảng cách: 2px;
  hiển thị: không; /* Mặc định ẩn */
}
/* Thêm lớp "show" cho phần tử được lọc */
.show {
  hiển thị: khối;
}
/* Đặt樣式 cho nút */
.btn {
  vạch biên: không;
  khung viền: không;
  khoảng cách: 12px 16px;
  màu nền: #f1f1f1;
  con trỏ: chỉ tay;
}
/* Thêm nền nhạt khi con trỏ chuột trỏ vào */
.btn:hover {
  màu nền: #ddd;
}
/* Thêm nền đậm cho nút hoạt động */
.btn.active {
  màu nền: #666;
  màu: trắng;
}

Bước 3 - Thêm JavaScript:

filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c == "all") c = "";
  // Thêm lớp "show" (display:block) vào các phần tử được lọc và loại bỏ lớp "show" từ các phần tử chưa được chọn
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}
// Hiển thị các phần tử được lọc
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];
    }
  }
}
// Ẩn các phần tử chưa được chọn
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(" ");
}
// Thêm lớp hoạt động (hiển thị nổi bật) vào nút điều khiển hiện tại
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";
  });
}

Thử ngay