jQuery addClass() วิธีการช่วยให้นักพัฒนามีวิธีในการเปลี่ยนแปลงองค์ประกอบในระดับโลกมากขึ้น ตามที่ชื่อเมธอดแนะนำ เราสามารถเพิ่มแอตทริบิวต์คลาสให้กับองค์ประกอบที่เลือกได้ ทำไมเราต้องการทำเช่นนี้?
มาดูตัวอย่างหน้าเว็บที่มีองค์ประกอบบางอย่าง เช่น ชื่อ ย่อหน้า และปุ่มสำหรับคลิกเพื่อดำเนินการบางอย่าง นอกจากหน้านี้แล้ว ยังมีสไตล์ชีตที่ใช้ชื่อคลาสขององค์ประกอบเหล่านี้ในการจัดรูปแบบ เมื่อคลิกปุ่ม เนื้อหาที่มีอยู่สามารถเปลี่ยนรูปแบบหรือลักษณะที่ปรากฏได้
เราสามารถใช้ addClass() วิธีการแทรกแอตทริบิวต์รูปแบบใหม่สำหรับเนื้อหาที่มีอยู่หลังจากคลิกปุ่ม ซึ่งทำให้สามารถเปลี่ยนสไตล์ของเนื้อหาที่มีอยู่ได้โดยใช้โค้ดเพียงบรรทัดเดียว การทำเช่นนี้ช่วยให้นักพัฒนาคิดเกี่ยวกับการจัดการองค์ประกอบต่างๆ ในรูปแบบที่มีสไตล์
มาเจาะลึกในตัวอย่างและดูว่าเราจะเขียนโค้ดอย่างไร
วิธีการทำงานของ jQuery addClass()
ในตัวอย่างของเรา เรากำลังเปลี่ยนแอตทริบิวต์คลาสของวัตถุเมื่อมีการคลิกปุ่ม ก่อนที่เราจะเข้าไปในโค้ดตัวอย่างนี้ เรามาดูกันว่า addClass() . เป็นอย่างไร ทำงาน สมมติว่าเรามี HTML นี้:
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: blue;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p> เรากำลังใช้