Computer >> Máy Tính >  >> Lập trình >> Javascript

Cách kiểm tra xem một lớp có tồn tại bằng JavaScript hay không

Việc kiểm tra xem một lớp có tồn tại trên một phần tử hay không thật đơn giản và nhanh chóng với thuộc tính JavaScript classList chứa () phương pháp.

Đầu tiên chúng ta hãy xem công thức chung để sử dụng classList.contains() và sau đó chúng ta sẽ xem xét một thực tế ca sử dụng.

công thức classList.contains () 

var element = document.querySelector("selector")
element.classList.contains("class")

Trong ví dụ chung ở trên, chúng tôi sử dụng querySelector() đa năng để tìm phần tử mục tiêu của chúng tôi thông qua tên bộ chọn của nó. Bộ chọn có thể là bộ chọn lớp, bộ chọn phần tử hoặc một loại bộ chọn khác.

Sau đó, chúng tôi chỉ định phần tử mà chúng tôi tìm thấy với querySelector() vào phần tử element đã khai báo của chúng tôi biến.

Sau đó, chúng tôi đính kèm thuộc tính classList contains() phương thức tới phần tử element của chúng tôi thông qua tham chiếu biến của nó. Sau đó, bên trong contains() đối số của phương thức (bên trong dấu ngoặc đơn), chúng tôi chỉ định tên của 'lớp' mà chúng tôi muốn kiểm tra xem có tồn tại hay không.

Các ví dụ chung chung rất nhàm chán, hãy bắt tay vào thực tế!

Nguồn cấp dữ liệu không được chỉnh sửa

Lọc với classList.contains ()
- một trường hợp sử dụng thực tế

Cách kiểm tra xem một lớp có tồn tại bằng JavaScript hay không

Bạn đang truy cập một trang web có nguồn cấp dữ liệu tin tức hỗn hợp gồm nhiều danh mục khác nhau. Nhưng bạn chỉ quan tâm đến việc đọc về công nghệ.

Nguồn cấp tin tức lộn xộn là báng bổ. Hãy lọc ra tất cả các danh mục khác, sử dụng classList.contains() phương pháp.

Đầu tiên, hãy thêm một số HTML để chúng tôi có một số nội dung để làm việc. Sau đó, chúng tôi sẽ nhanh chóng tạo kiểu cho nó và chuyển sang JavaScript.

HTML cho nguồn cấp tin tức của chúng tôi 

<div class="wrapper">
  <h1>Newsfeed</h1>

  <div class="news-feed">
    <h3 class="headline">
      <a class="link category-health" href="#">Health</a>
    </h3>
    <h3 class="headline">
      <a class="link category-finances" href="#">Finances</a>
    </h3>
    <h3 class="headline">
      <a class="link category-politics" href="#">Politics</a>
    </h3>
    <h3 class="headline">
      <a class="link category-nature" href="#">Nature</a>
    </h3>
    <h3 class="headline">
      <a class="link category-humor" href="#">Humor</a>
    </h3>
    <h3 class="headline">
      <a class="link category-weather" href="#">Weather</a>
    </h3>
    <h3 class="headline">
      <a class="link category-technology" href="#">Technology</a>
    </h3>
    <h3 class="headline">
      <a class="link category-sports" href="#">Sports</a>
    </h3>
  </div>

  <div class="fixed-container">
    <span>Filter:</span>
    <button class="btn-technology">Technology</button>
  </div>
</div>
<!-- wrapper -->

Đối với nội dung HTML của chúng tôi, chúng tôi có:

  • Một tiêu đề lớn.
  • Nguồn cấp dữ liệu tin tức với các danh mục khác nhau.
  • Bên ngoài nguồn cấp tin tức, chúng tôi có một nút gọi là Công nghệ. Đây là nút chúng tôi sẽ sử dụng để chuyển (ẩn / hiện) tất cả các chủ đề không liên quan đến công nghệ.

Rõ ràng, ví dụ về nguồn cấp tin tức của chúng tôi ở trên chỉ có một số mục tin tức (cho mục đích minh họa), vì vậy nó trông không lộn xộn. Nhưng một nguồn cấp tin tức hỗn hợp thực sự sẽ có vô số bài báo từ mỗi thể loại tin tức, tràn ngập nguồn cấp dữ liệu. Đó là khi các nút lọc hữu ích.

Tạo kiểu CSS

Tất cả CSS sau đây là thẩm mỹ và tùy chọn, ngoại trừ .js-hide , là lớp trợ giúp mà chúng tôi sẽ sử dụng với JavaScript trong phân đoạn tiếp theo. 

body {
  font-family: "Source Sans Pro", "Helvetica", "Sans-Serif";
}

.wrapper {
  position: relative;
  padding-left: 1rem;
  padding-right: 1rem;
  margin: 2rem auto;
  max-width: 50em;
}

.news-feed {
  border: 1px solid #eee;
  max-height: 256px;
  overflow-y: scroll;
}

.headline {
  font-size: 1.25rem;
  padding: 0.25rem 1.5rem;
}

.link {
  color: #252525;
  text-decoration: none;
}

.fixed-container {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 1.5rem;
}

.btn-technology {
  cursor: pointer;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  margin-top: 2rem;
  margin-left: 1rem;
  border-radius: 4px;
  border: 1px solid #82b97e;
  outline: none;
}

.js-hide {
  display: none;
}

Chỉ cần đảm bảo rằng bạn thêm .js-hide đó vào biểu định kiểu CSS của bạn và hãy chuyển sang JavaScript!

JavaScript

Sao chép và dán mã sau vào tệp JS của bạn. Tôi sẽ giải thích cách mọi thứ hoạt động ngay bên dưới. 

var btnTechnology = document.querySelector(".btn-technology")
var allNewsCategories = document.querySelectorAll(".news-feed .link")

function showCategoryTechnology() {
  for (var i = 0; i < allNewsCategories.length; i++) {
    if (!allNewsCategories[i].classList.contains("category-technology")) {
      allNewsCategories[i].parentElement.classList.toggle("js-hide")
    }
  }
}
btnTechnology.addEventListener("click", showCategoryTechnology)

Cách mã JavaScript hoạt động

  • Đầu tiên, chúng tôi sử dụng querySelector() để lấy phần tử nút Technlogy của chúng tôi thông qua bộ chọn lớp của nó .btn-technology . mà sẽ đóng vai trò kích hoạt cho chức năng lọc của chúng ta sau này. Chúng tôi chỉ định phần tử nút của mình cho một btn-technology có tên biến .
  • Sau đó, chúng tôi sử dụng querySelectorAll() để lấy tất cả Nguồn cấp tin tức của chúng tôi (.news-feed ) các mục và chọn liên kết từng mục theo tên lớp của chúng (.link ). Sau đó, chúng tôi chỉ định tất cả các liên kết mục tin tức của chúng tôi cho một biến có tên là allNewsCategories .
  • Sau đó, chúng tôi tạo một hàm, showCategoryTechnology() {..} mà chúng tôi sẽ gọi khi nhấp vào nút Công nghệ.
  • Bên trong thân hàm, chúng tôi lặp lại thông qua tất cả các mục () bên trong phần tử Nguồn cấp tin tức và lưu trữ chúng trong một mảng [i]
  • Bên trong vòng lặp, chúng tôi thêm một câu lệnh if có điều kiện cho biết:“nếu có bất kỳ mục nào trong danh sách mà chúng tôi vừa lặp lại qua không chứa lớp .category-technology - sau đó chạy phương thức classList.toggle với .js-hide phân loại về những mặt hàng đó.
  • Trên dòng cuối cùng, chúng tôi đính kèm addEventListener() cho phần tử nút của chúng tôi. Chúng tôi yêu cầu người nghe sự kiện lắng nghe sự kiện 'nhấp chuột'. Khi nhấp vào nút, nó sẽ gọi showCategoryTechnology() , chạy toàn bộ khối mã giúp cho tính năng chuyển đổi này trở nên khả thi.

! biểu tượng (Toán tử logic) mà chúng tôi đặt trước allNewsCategories[i] là những gì xử lý phần “không phải” của if của chúng tôi tuyên bố. Nếu bạn xóa ! thì mã của chúng tôi sẽ làm ngược lại với whatit hiện tại.

Chúng tôi cũng có thể đã sử dụng classList.remove () để loại bỏ các mục tin tức không mong muốn của chúng tôi. Nhưng trong hầu hết các trường hợp, việc cung cấp cho người dùng của chúng tôi tùy chọn ẩn / hiển thị các mục là điều hợp lý mà classList.toggle () thực hiện.

Nhận tất cả mã trên CodePen.

Tài nguyên

  • MDN Web Docs element.classList