การเลือก element โดยใช้ class

ถึงแม้ว่า คำสั่ง $G() จะทำงานกับกับ id name หรือ object เท่านั้น แต่การเลือก element หลายๆตัวจาก className ก็ไม่ใช่เรื่องยากแต่อย่างใด โดยการเขียนคำสั่งเพิ่มเติมเพียงเล็กน้อย ซึ่งผมใช้เทคนิคนี้กับโค้ดผมส่วนใหญ่ทั้งหมด เพราะมันสามารถทำการเลือก element จาก attribute ใดๆก็ได้ ยกตัวอย่างเช่น การเลือกปุ่ม ลบ การเลือกปุ่มแก้ไข หรือการเลือก checkbox ที่ผมใช้ในหน้า list รายการของ GCMS

forEach($E('parent_id').getElementsByTagName('tag'), function() {

  if ($G(this).hasClass('required_class')) {

    // element ที่มี class ที่ต้องการ

  }

});

$E('parent_id') คือ element หลักที่ต้องการหานะครับ ซึ่งผลลัพท์จะเป็น element ต่างที่อยู่ภายใน element นี้ (เป็นการจำกัด filter ให้แคบ) ซึ่งถ้าต้องการเลือก element ทุกตัวบนหน้าเพจก็อาจใช้ document.body แทนได้ครับ

tag คือชื่อ tag ที่ต้องการหา ในทางปฏิบัติถ้าเราควบคุมให้ tag ที่ต้องการมีชนิเดียวกัน การเลือก element ก็จะง่ายและเร็วขึ้น (เร็วกว่าการตรวจสอบมันทุก element) แต่ถ้าต้องการตรวจสอบทุก element ก็ใช้ * แทนได้ครับ

required_class คือ class ที่ต้องการครับ สามารถระบุได้หลายตัวเช่น class1 class2 ซี่งถ้าพบตัวใดตัวหนึ่งใน 2 ตัว ก็จะเป็นจริงครับ นอกจากนี้เรายังอาจใช้เทคนิคนี้กับการเลือก element ที่ทำงานต่างๆกันได้ด้วย เช่นการเลือกปุ่ม ลบ หรือแก้ไข ซึ่งอาจมีหลายๆปุ่มบนหน้าเพจ

var patt = /(edit|delete)_([0-9]+)/;

forEach($E('parent_id').getElementsByTagName('img'), function() {

  if (hs = patt.exec(this.id)) {

    // ให้ element ที่ต้องการ มี pointer เป็นรูปมือ

    this.style.cursor = 'pointer';

    // hs[1] = edit หรือ delete

    // hs[2] = id ที่ต้องการแก้ไข หรือลบ

    alert('action=' + hs[1] + '&id=' + hs[2]);

  }

});

ตัวอย่างโค้ดที่แนะนำนะครับ ซึ่งถ้าเขียนโค้ดที่สอดคล้องกับการใช้คำสั่ง ก็จะทำให้การออกแบบ Javascript ง่ายขึ้น ตัวอย่างเต็มๆ สามารถดูได้จาก GCMS เลยครับ

<div id=parent_id>

<img src=edit.png alt=edit class=edit id=edit_1>

<img src=delete.png alt=delete class=delete id=delete_1>

............

<img src=edit.png alt=edit class=edit id=edit_10>

<img src=delete.png alt=delete class=delete id=delete_10>

</div>