สมมุติมีโค้ดง่ายๆแบบนี้ เวลาเอาเม้าไปว่างไว้หน้าตัวเลข มันจะเปลี่ยนสี
พอคลิก มันจะไปดึงข้อมูลใน ajax.php มาแทนที่
แต่ปัญหาคือข้อมูลที่ดึงมาให้ เวลาเอาเม้าไปวางมันไม่เปลี่ยนสี มันมีทางแก้หรือเปล่าครับ
ไฟล์แรก
<script type='text/javascript'>
$(document).ready(function() {
$('#test span').hover(function(){
$(this).css("color","#0000FF");
});
$('#test').live( 'click' , function(){
$.get(ajax.php",function(data){
$("#test").html(data);
});
});
});
</script>
<div id='test'>
<span id='1'>111</span>
<span id='2'>222</span>
</div>
ส่วนไฟล์ ajax.php
<?echo "<span id='3'>333</span>";?>
เอาเฉพาะตัวเปลี่ยนสีละกัน ดึงข้อมูลได้อยู่แล้วนิ ??
จากโค้ดนะ
<div id='test'>
<span id='1'>111</span>
<span id='2'>222</span>
แนะนำว่า ให้เพิ่ม class เข้าไปที่ตัว span เช่น
<div id='test'>
<span id='1' class='red'>111</span>
<span id='2' class='red'>222</span>
ตัว jquery ก็แก้เป็นแบบนี้
/*สามารถกำหนดสีดั้งเดิมไปเลยก็ได้*/
$('#test span').css({"color","black"});
/*เมื่อเอาเมาส์วางไว้บน คลาสนี้ จะกลายเป็นแดง*/
$('#test .red').mouseover(function(){
$(this).css("color","red");
});
/*พอเอาเมาส์ออกก็เปลี่ยนสีกลับ แนะนำให้ใส่สีเดียวกับที่ใช้เดิม*/
$('#test .red').mouseoutr(function(){
$(this).css("color","black");/*ใส่สีอะไรก็ได้*/
});
ตัวอย่างนะ ลองๆ ปรับใช้ดู
พัฒนาเว็บไซต์
