ขอสอบถามเรื่อง jquery หน่อยครับ เรื่องการอ้างอิง ของ tag

พูดคุยแลกเปลี่ยน ปัญหา การเขียน JavaScript เครื่องมือ AJAX Web 2.0 AJAX Framework jQuery และ Node.JS รวมถึง Framework Express ของ Node.JS ทำงานฝั่ง Server

Moderator: mindphp

บอย112233

ขอสอบถามเรื่อง jquery หน่อยครับ เรื่องการอ้างอิง ของ tag

โพสต์ที่ยังไม่ได้อ่าน โดย บอย112233 »

ผมมี code HTML ดังนี้

<tbody id="1">
<tr>
<td></td>
<tr>
</tbody>
<tbody id="2">
<tr>
<td></td>
<tr>
</tbody>
<tbody id="3">
<tr>
<td></td>
<tr>
</tbody>

ส่วน script ก็เป็นแบบนี้ครับ

$(document).ready(function(){
$('table tbody').each(function(index){
var $table = $(this);
$('<div class="box">click</div>').appendTo('body').click(function()
{
alert($(this).attr('class'));
alert($table.attr('id'));
});
});
});



สิ่งที่อยากทราบคือ
ในการ loop หา tbody มันจะสร้าง div class ="box" ให้ด้วยและสามารถคลิกได้
แต่เวลาคลิกนี้แหละมันจะทราบได้ไงครับว่าเราคลิกที่ tbody ตัวไหน ที่อ้างอิงกับ div ที่สร้างด้วย .each()
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 21988
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: ขอสอบถามเรื่อง jquery หน่อยครับ เรื่องการอ้างอิง ของ tag

โพสต์ที่ยังไม่ได้อ่าน โดย tsukasaz »

โค้ด: เลือกทั้งหมด

$(document).ready(function(){ // ตรวจสอบว่าหน้าเว็บโหลดข้อมูลมาครบ พร้อมทำงานหรือยัง ถ้าโหลดพร้อมแล้วจะทำคำสั่งภายใน
   $('table tbody').each(function(index){ // วนลูปตามจำนวนของ tbody ในโค้ดจะวน 3 รอบ
      var $table = $(this); // เก็บค่า Object ของ tbody ในแต่ละรอบไว้ที่ตัวแปร $table

      $('<div class="box">click</div>').appendTo('body').click(function()
      { // สร้าง tag <div class="box">click</div> แล้วเพิ่มเข้าไปใน body ของโค้ด และกำหนดเหตุการณ์คลิกให้กับมัน

         alert($(this).attr('class')); 
         // $(this) ในที่นี้หมายถึง Object ของ <div class="box">click</div> ให้ alert ตัว attribute ชื่อ class ซึ่งก็คือค่า box

         alert($table.attr('id')); 
         // $table คือ Object ของ tbody ที่ประกาศไว้ ให้ alert ตัว attribute ชื่อ id ซึ่งก็คือค่า 1 2 3 แล้วแต่ว่าในลูปนั้นเป็น tbody ตัวไหน
      });
   });
});
ถ้าแตกการทำงานของลูปออกจะเป็น

โค้ด: เลือกทั้งหมด

// รอบที่ 1 
$('<div class="box">click</div>').appendTo('body').click(function()
{ 
   alert('box'); 
   alert(1); 
});

// รอบที่ 2
$('<div class="box">click</div>').appendTo('body').click(function()
{ 
   alert('box'); 
   alert(2); 
});

// รอบที่ 3
$('<div class="box">click</div>').appendTo('body').click(function()
{ 
   alert('box'); 
   alert(3); 
});
จริงๆ แล้วตอนที่คลิก <div class="box">click</div> มันไม่ได้วิ่งไปหา tbody เพื่อเอาค่า id แต่มันถูกกำหนดค่ามาเรียบร้อยแล้วในตอนวนลูป ว่าถ้าถูกคลิกจะต้อง alert อะไร
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 71