วิธีตรวจสอบว่ามีคลาสที่มี JavaScript

การตรวจสอบว่ามีคลาสอยู่บนองค์ประกอบหรือไม่นั้นทำได้ง่ายและรวดเร็วด้วย contain() ของคุณสมบัติ JavaScript classList วิธีการ

มาดูสูตรทั่วไปของการใช้ classList.contains() . กันก่อน แล้วเราจะดูเชิงปฏิบัติ กรณีใช้งาน

classList.contains() สูตร

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

ในตัวอย่างทั่วไปข้างต้น เราใช้ querySelector() . อเนกประสงค์ วิธีค้นหาองค์ประกอบเป้าหมายของเราโดยใช้ชื่อตัวเลือก ตัวเลือกอาจเป็นตัวเลือกคลาส ตัวเลือกองค์ประกอบ หรือตัวเลือกประเภทอื่น

จากนั้นเรากำหนดองค์ประกอบที่เราพบด้วย querySelector() ไปยัง element . ที่เราประกาศไว้ ตัวแปร

จากนั้นเราแนบ contains() . ของคุณสมบัติ classList วิธีการของเรา element ผ่านการอ้างอิงตัวแปร จากนั้นภายใน contains() อาร์กิวเมนต์ของ method (ในวงเล็บ) เราระบุชื่อของ 'class' ที่เราต้องการตรวจสอบว่ามีอยู่หรือไม่

ตัวอย่างทั่วไปนั้นน่าเบื่อ มาปฏิบัติกันเถอะ!

ฟีดข่าวที่ไม่กระจาย

การกรองด้วย classList.contains()
— กรณีการใช้งานจริง

คุณกำลังเยี่ยมชมเว็บไซต์ที่มีฟีดข่าวผสมของหมวดหมู่ต่างๆ มากมาย แต่คุณสนใจแค่อ่านเกี่ยวกับเทคโนโลยีเท่านั้น

ฟีดข่าวรกเป็นการดูหมิ่น มากรองหมวดหมู่อื่นทั้งหมดโดยใช้ classList.contains() วิธีการ

ขั้นแรก มาเพิ่ม HTML กันก่อน เพื่อให้เรามีเนื้อหาที่จะใช้งาน จากนั้นเราจะจัดรูปแบบอย่างรวดเร็ว และไปยัง JavaScript

HTML สำหรับฟีดข่าวของเรา

<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 -->

สำหรับเนื้อหา HTML ของเรา เรามี:

• พาดหัวข่าวใหญ่
• ฟีดข่าวที่มีหมวดหมู่ต่างๆ
• นอกฟีดข่าว เรามีปุ่มที่เรียกว่าเทคโนโลยี นี่คือปุ่มที่เราจะใช้เพื่อสลับ (ซ่อน/แสดง) หัวข้อที่ไม่ใช่เทคโนโลยีทั้งหมด

เห็นได้ชัดว่า ตัวอย่างฟีดข่าวของเราด้านบนมีรายการข่าวเพียงไม่กี่รายการ (เพื่อจุดประสงค์ในการแสดงภาพประกอบ) ดังนั้นจึงไม่ดูรก แต่เป็น ฟีดข่าวแบบผสม จะมีบทความมากมายจากแต่ละหมวดข่าว นั่นคือเมื่อปุ่มกรองมีประโยชน์

การจัดรูปแบบ CSS

CSS ต่อไปนี้ทั้งหมดเป็นแบบเสริมสวยและเป็นทางเลือก ยกเว้น .js-hide class ซึ่งเป็นคลาสตัวช่วยที่เราจะใช้กับ JavaScript ในส่วนถัดไป

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;
}

เพียงให้แน่ใจว่าคุณเพิ่ม .js-hide ไปที่สไตล์ชีต CSS ของคุณแล้วไปที่ JavaScript!

จาวาสคริปต์

คัดลอกและวางโค้ดต่อไปนี้ลงในไฟล์ JS ของคุณ ฉันจะอธิบายว่าทุกอย่างทำงานอย่างไรด้านล่าง

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)

วิธีการทำงานของโค้ด JavaScript

• ขั้นแรกเราใช้ querySelector() เพื่อคว้าองค์ประกอบปุ่ม Technlogy ของเราผ่านตัวเลือกคลาส .btn-technology . ซึ่งจะทำหน้าที่เป็นตัวกระตุ้นสำหรับฟังก์ชันการกรองของเราในภายหลัง เรากำหนดองค์ประกอบปุ่มของเราให้กับตัวแปรที่เรียกว่า btn-technology .
• จากนั้นเราก็ใช้ querySelectorAll() เพื่อคว้าฟีดข่าวทั้งหมดของเรา (.news-feed ) และเลือกลิงค์แต่ละรายการตามชื่อคลาส (.link ). จากนั้นเราจะกำหนดลิงค์รายการข่าวทั้งหมดของเราให้กับตัวแปรที่เรียกว่า allNewsCategories .
• จากนั้นเราก็สร้างฟังก์ชัน showCategoryTechnology() {..} ซึ่งเราจะเรียกเมื่อมีการคลิกปุ่มเทคโนโลยี
• ภายในเนื้อความของฟังก์ชัน เรา วนซ้ำ ผ่านรายการทั้งหมด () ภายในองค์ประกอบฟีดข่าวและเก็บไว้ในอาร์เรย์ [i]
• ภายในลูป เราเพิ่มเงื่อนไข คำสั่ง if ซึ่งระบุว่า:“หากมีรายการใดในรายการที่เราเพิ่งทำซ้ำผ่าน อย่า มีคลาส .category-technology — จากนั้นรันเมธอด classList.toggle ด้วย .js-hide กับสิ่งของเหล่านั้น
• ในบรรทัดสุดท้าย เราแนบ addEventListener() วิธีการองค์ประกอบปุ่มของเรา เราบอกให้ผู้ฟังเหตุการณ์ฟังเหตุการณ์ 'คลิก' เมื่อคลิกปุ่ม จะเรียก showCategoryTechnology() ซึ่งเรียกใช้บล็อกโค้ดทั้งหมดที่ทำให้คุณลักษณะการสลับนี้เป็นไปได้

! สัญลักษณ์ (Logical Operator) ที่เราวางไว้ข้างหน้า allNewsCategories[i] คือสิ่งที่จัดการส่วน "ไม่" ของ if . ของเรา คำแถลง. หากคุณลบ ! จากนั้นโค้ดของเราจะทำตรงกันข้ามกับที่มันทำในตอนนี้

นอกจากนี้เรายังสามารถใช้ classList.remove() เพื่อลบรายการข่าวที่ไม่ต้องการของเรา แต่ในกรณีส่วนใหญ่ มันสมเหตุสมผลที่จะให้ตัวเลือกแก่ผู้ใช้ในการซ่อน/แสดงรายการ ซึ่งเป็นสิ่งที่ classList.toggle() ทำ

รับรหัสทั้งหมดบน CodePen

แหล่งข้อมูล

• MDN Web Docs element.classList