หน้าแรก

jQuery คำสั่งคลาส .toggleClass() ใน jquery


.toggleClass(className) Returns: jQuery

คำสั่ง .toggleClass(className) ถ้าจะแปลเป็นภาษาชาวบ้านก็คือ การสลับ class เข้า-ออก คือ ถ้ามี class อยู่ใน selector ให้เอาออก หากไม่มีอยู่ ก็ให้เอา class เข้าไปนั่นเอง

เช่น

	<style>
	.red{color:red;}
	</style>
	<a class="red" href="#">jquerythai</a>
 
   <script>
     $(document).ready(function(){
		jQuery('a').click(function(){
			 jQuery('a').toggleClass('red');
		});
     });
   </script>

1. เมื่อ page โหลดเสร็จ ตัวหนังสือ จะเป็นสีแดง
2. click ครั้งแรก jQuery พบว่ามี class red อยู่ใน selector แล้ว ดังนั้น jQuery จะทำการ remove class red ออกไป
3. click อีกครั้ง jQuery พบว่ามี class red ไม่มีอยู่ใน selector แล้ว ดังนั้น jQuery จะทำการ add class red เข้าไป
4. click ต่อไปก็จะ เข้า-ออก ตาม condition ข้อ 2 และ 3

.toggleClass(className, switch) Returns: jQuery

คำสั่ง .toggleClass(className, switch) จะคล้ายๆกับคำสั่ง .toggleClass(className) แต่จะมี switch สำหรับเลือกว่าจะ add หรือ remove class โดยที่ถ้า switch=true จะ addClass หาก switch=false จะ removeClass

	<style>
	.red{color:red;}
	.yellow{color:yellow;
	}
	</style>
	<a  class="jquerythai" href="#">jquerythai</a>
	<br>
	<a  class="jquery" href="#">jquery</a>
 
 
   <script>
     $(document).ready(function(){
		jQuery('.jquerythai').click(function(){
			 jQuery(this).toggleClass('red',false);
		});
 
		jQuery('.jquery').click(function(){
			 jQuery(this).toggleClass('yellow',true);
		});		
     });
   </script>

ผลที่ได้คือ ตัว link jQuerythai แม้ว่าเรา click กี่ครั้งก็จะไม่ได้ addClass ให้ เพราะค่า switch เป็น false ตัวหนังสือ ก็จะไม่เปลี่ยนเป็นสีแดง
ส่วน link jquery เมื่อ เรา click ครั้งแรกเปลี่ยนเป็นสีเหลืองแล้ว ครั้งต่อๆไป แม้เราจะ click กี่ครั้งก็จะไม่ออก เพราะเรา hardcode switch เป็น true ไว้

WARNING : การส่งค่า switch ต้องเป็น true หรือ false เื่ท่านั้นนะ ส่งเป็น 0,1 ไม่ได้ (น่าจะทำให้มันได้เนอะ ^^”)

.toggleClass(function(index, class), [ switch ])

.toggleClass(function(index, class), [ switch ]) การส่งค่า parameter ตัวแรกเป็น function ก็เพื่อทำการ select selector ตัวใดตัวหนึ่งในจำนวน selector ทั้งหมด เช่น

	<style>
	.red{color:red;}
	.redBold{color:red;font-weight:bold;}
	.yellow{color:yellow;
	}
	</style>
	<div>
		<a class="jQueryThai" href="#">jQueryThai</a>
		<br />
		<a class="jQuery" href="#">jQuery</a>
		<br />
		<a class="google" href="#">google</a>
		<br />
		<a class="pantip" href="#">pantip</a>
	<div>
	<input value="run" type="button"/>
 
   <script>
     $(document).ready(function(){
		jQuery('input').click(function(){	
			 jQuery('a').toggleClass(function(index,className){
				if(className == "jQueryThai")
				{
				 return 'redBold';
				}
				else if(index == 1)
				{
				 return 'red'
				}
				else
				{
					return 'yellow'
				}
			 });
		});	
     });
   </script>

เมือ กด run
- jQueryThai จะเป็นสีแดง หนา
- jQuery จะเป็น สีแดง
- ที่เหลือ จะเป็นสีเหลือง

เขียนโดย : tikstt
เว็บไซท์ : http://tikstt.or.hn


jQuery คำสั่งคลาส .hasClass() jQuery คำสั่ง .html()
บทความที่เกี่ยวข้อง

ดูบทความ jquery ทั้งหมด »