วิธีสลับคลาสด้วยคุณสมบัติ JavaScript classList

วิธีสลับคลาสในองค์ประกอบด้วย JavaScript เป็นหนึ่งในทักษะที่ใช้งานได้จริงที่สุดที่คุณสามารถเรียนรู้ได้ในฐานะนักพัฒนา การสลับใช้สำหรับหลายๆ อย่าง รวมถึงการแสดงและซ่อนเมนู การเพิ่มและลบตัวกรองการค้นหา และปุ่มโซเชียลมีเดีย (ชอบ ยกนิ้วให้ เป็นต้น)

การสลับไม่จำเป็นต้องซับซ้อนกว่าโค้ดสองสามบรรทัด แน่นอน ขึ้นอยู่กับบริบท วันนี้เราจะมาเรียนรู้วิธีง่ายๆ ในการเริ่มต้นด้วยการสลับไม่เพียงแต่เรียนรู้ JavaScript โดยทั่วไป

โครงสร้าง HTML

ก่อนที่เราจะไปถึงสิ่งที่ใช้งานได้จริงด้วย JavaScript เรามาตั้งค่าองค์ประกอบ HTML สองสามอย่างเพื่อให้เรามีบางสิ่งที่จะโต้ตอบด้วย มาสร้างเสื้อคลุม ปุ่ม และกล่องกัน

ใส่ข้อมูลต่อไปนี้ในแท็กเนื้อหาของเอกสาร HTML:

<div class="wrapper">
  <button class="button">Toggle</button>
  <div class="box"></div>
</div>

องค์ประกอบ div หลัก (เสื้อคลุม) อยู่ที่นั่นเท่านั้นเพื่อให้เราสามารถจัดองค์ประกอบลูก (กล่องและปุ่ม) ด้วย CSS ได้ นี่คือเครื่องสำอาง ไม่จำเป็นสำหรับสิ่งนี้ที่จะได้ผล

หมายเหตุ:หากคุณใช้เครื่องมือแก้ไขโค้ดออนไลน์ เช่น CodePen คุณสามารถเพิ่มโค้ดนี้ในหน้าต่างแท็บ HTML พวกเขาเพิ่มส่วนที่เหลือของ HTML ให้คุณเบื้องหลัง ซึ่งรวมถึงแท็กเนื้อหา

รูปแบบ CSS

องค์ประกอบ div หลักมี .wrapper คลาสที่มีคุณสมบัติ Flexbox บางอย่างที่จัดวางองค์ประกอบย่อยไว้ตรงกลาง:กล่องและปุ่ม ฉันจะไม่อธิบายวิธีการและเหตุผลของ Flexbox นั่นสำหรับบทช่วยสอนอื่น

ปุ่มและกล่องมีคลาสสไตล์พื้นฐานสำหรับการตกแต่ง

.wrapper {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #eeeeee;
}

.button {
  display: block;
  text-align: center;
  font-size: 1.5rem;
  color: white;
  background-color: #262422;
  border-radius: 4px;
  padding: 1rem 2rem;
  margin-bottom: 1rem;
}

.bg-red {
  background-color: #aa2f18;
}

สิ่งสำคัญที่ต้องเน้นที่นี่คือ .bg-red คลาสที่มี CSS สีพื้นหลัง คุณสมบัติที่มีค่า '#AA2F18' (สีแดง) นี่คือคลาสที่เราต้องการสลับ (เพิ่มหรือลบ) ไปที่องค์ประกอบกล่องของเราเมื่อเราคลิกที่องค์ประกอบปุ่ม

การจัดการเหตุการณ์ JavaScript

ก่อนที่เราจะสามารถเริ่มจัดการองค์ประกอบด้วย JavaScript เราต้องเก็บข้อมูลอ้างอิงถึงสององค์ประกอบของเรา (กล่องและปุ่ม) ก่อน เราทำได้โดยการประกาศตัวแปรสองตัว button และ box .จากนั้นเรากำหนดองค์ประกอบทั้งสองให้กับตัวแปรที่เกี่ยวข้องกัน

ในการเลือกองค์ประกอบกล่องและปุ่มที่เราต้องการเก็บข้อมูลอ้างอิง เราจะใช้ querySelector อันรุ่งโรจน์ วิธีการคว้าคลาสองค์ประกอบของเรา:

let button = document.querySelector(".button");
let box = document.querySelector(".box");

ตอนนี้เรามีข้อมูลอ้างอิงถึงองค์ประกอบเป้าหมายแต่ละองค์ประกอบแล้ว เราสามารถจัดการ DOM ได้ โดยเข้าถึงคุณสมบัติและเมธอดขององค์ประกอบเหล่านั้น ในกรณีนี้ เราต้องการใช้ ตัวฟังเหตุการณ์ ที่ฟังเหตุการณ์การคลิก บนองค์ประกอบปุ่ม หลังจากที่ตรวจพบการคลิกแล้ว เราต้องการเรียกใช้ฟังก์ชัน ที่ใช้สีพื้นหลังสลับ บนองค์ประกอบกล่องของเรา

ในการทำเช่นนั้น เราจะแนบ addEventListener() วิธีการองค์ประกอบปุ่มของเรา (ผ่านการอ้างอิงตัวแปร) ภายในเมธอดตัวฟังเหตุการณ์นี้ เรากำลังเพิ่มค่าพารามิเตอร์สองค่า:'click' (ประเภทเหตุการณ์)และfunction() . เราจะใช้ฟังก์ชันที่ไม่ระบุชื่อ (ไม่มีชื่อ) ในตัวอย่างนี้

จากนั้นในฟังก์ชันที่ไม่ระบุชื่อ:เราแนบ toggle() . ของคุณสมบัติ JavaScript classList วิธีการองค์ประกอบกล่องของเรา งานของวิธีการสลับคือการเพิ่มหรือลบ .bg-red . ของเรา คลาส:

button.addEventListener("click", function() {
  box.classList.toggle("bg-red");
});

วิธีการสลับ classList ทำงานดังนี้:หากคลาสที่ระบุมีอยู่แล้วในองค์ประกอบเป้าหมาย คลาสนั้นจะถูกลบออก หากไม่มีอยู่ก็จะถูกเพิ่มเข้าไป

เสร็จแล้ว! ตอนนี้คุณรู้วิธีสลับคลาสในองค์ประกอบที่ระบุด้วย JavaScript ธรรมดาแล้ว ฉันใส่โค้ดทั้งหมดจากบทช่วยสอนนี้ใน CodePen

โค้ดนี้ใช้ได้กับเบราว์เซอร์รุ่นใหม่ตั้งแต่ IE10 ขึ้นไป