JqueryUI - ลบคลาส
บทนี้จะกล่าวถึงไฟล์ removeClass()วิธีการซึ่ง ich เป็นหนึ่งในวิธีที่ใช้ในการจัดการเอฟเฟ็กต์ภาพ jQueryUI removeClass ()วิธีการลบคลาสที่ใช้ออกจากองค์ประกอบ
เมธอดremoveClass ()ลบคลาสที่ระบุไปยังองค์ประกอบที่ตรงกันในขณะที่เคลื่อนไหวการเปลี่ยนแปลงสไตล์ทั้งหมด
ไวยากรณ์
เพิ่มในเวอร์ชัน 1.0 ของ jQueryUI
removeClass() method มีไวยากรณ์พื้นฐานดังนี้ -
.removeClass( className [, duration ] [, easing ] [, complete ] )| ซีเนียร์ | พารามิเตอร์และคำอธิบาย |
|---|---|
| 1 | className นี่คือสตริงที่มีคลาส CSS อย่างน้อยหนึ่งคลาส (คั่นด้วยช่องว่าง) ที่จะลบออก |
| 2 | duration นี่คือประเภท Number หรือ String และระบุจำนวนมิลลิวินาทีของเอฟเฟกต์ ค่า 0 จะนำองค์ประกอบในรูปแบบใหม่โดยตรงโดยไม่มีความคืบหน้า ค่าเริ่มต้นของมันคือ400 |
| 3 | easing เป็นประเภท String และระบุวิธีดำเนินการในเอฟเฟกต์ ค่าเริ่มต้นของมันคือการแกว่ง ค่าที่เป็นไปได้ที่นี่ |
| 4 | complete นี่คือวิธีการโทรกลับที่เรียกสำหรับแต่ละองค์ประกอบเมื่อเอฟเฟกต์เสร็จสมบูรณ์สำหรับองค์ประกอบนี้ |
เพิ่มในเวอร์ชัน 1.9 ของ jQueryUI
ด้วยเวอร์ชัน 1.9 ตอนนี้วิธีนี้รองรับตัวเลือกเด็กซึ่งจะทำให้องค์ประกอบที่สืบเชื้อสายมาเคลื่อนไหวได้
.removeClass( className [, options ] )| ซีเนียร์ | พารามิเตอร์และคำอธิบาย |
|---|---|
| 1 | className นี่คือสตริงที่มีคลาส CSS ตั้งแต่หนึ่งคลาสขึ้นไป (คั่นด้วยช่องว่าง) |
| 2 | options นี่แสดงถึงการตั้งค่าภาพเคลื่อนไหวทั้งหมด คุณสมบัติทั้งหมดเป็นทางเลือก ค่าที่เป็นไปได้คือ -
|
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้เมธอดremoveClass ()
ผ่านชั้นเดียว
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>jQuery UI removeClass Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.elemClass {
width: 200px;
height: 50px;
background-color: #b9cd6d;
}
.myClass {
font-size: 40px; background-color: #ccc; color: white;
}
</style>
<script type = "text/javascript">
$(document).ready(function() {
$('.button').click(function() {
if (this.id == "add") {
$('#animTarget').addClass("myClass", "fast")
} else {
$('#animTarget').removeClass("myClass", "fast")
}
})
});
</script>
</head>
<body>
<div id = animTarget class = "elemClass">
Hello!
</div>
<button class = "button" id = "add">Add Class</button>
<button class = "button" id = "remove">Remove Class</button>
</body>
</html>ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML removeclassexample.htmและเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณต้องเห็นผลลัพธ์ต่อไปนี้ด้วย ตอนนี้คุณสามารถเล่นกับผลลัพธ์ -
คลิกที่ปุ่มเพิ่มชั้นเรียนและลบชั้นเรียนเพื่อดูผลของชั้นเรียนในกล่อง