jquery-add-attri

เพิ่มและลบ attribute ด้วย jquery

การสร้าง attribute ใหม่เข้าไปใน DOM (Document Object Model) หรือ HTML element นั้นเราสามารถทำได้ด้วยคำสั่งจาก jquery ลองมาดูวิธีการทำกันครับ

jquery-add-attri

jquery-add-attri

เพิ่มและลบ attribute ด้วย jquery

เรื่องของการเพิ่ม ลบ หรือจัดการกับ attribute นับว่าเป็นความสามารถหลักๆของ javascript ที่ทำได้ดีมากๆ และได้ “เจคิวรี่” มาช่วยให้การทำงานทำได้ง่ายขึ้นไปอีก เรามักจะเพิ่ม attribute ใหม่ลงไปเพื่อให้ element เดิมในหน้านั้นๆ มีค่าแตกต่างไปจากความสามารถแรกที่เราตั้งไว้ตอนโหลดหน้าขึ้นมา

เรามาดูวิธีเพิ่มกันเลยก็แล้วกันนะครับ ผมจะตั้ง element พื้นฐานเอาไว้ขึ้นมาก่อน

Name : <input type="text" name="student" placeholder="name">
<br>
Email : <input type="email" name="email" placeholder="[email protected]">

ทีนี้เราจะทำการเพิ่ม attribute ที่ชื่อ class และใส่ค่า form-control ซึ่งเรียกความสามารถของ css ออกมาจาก bootstrap ครับ เราจะใช้ function ของเจคิวรี่ ที่ชื่อว่า attr() ในการเพิ่มลงไปใน element ที่ต้องการ โดยคราวนี้ผมจะเรียกโดยใช้ input เป็น selector เพราะว่า ทั้งสองค่านั้นไม่มีค่าอะไรที่บ่งบอกว่าเป็นตัวเดียวกันหรือกลุ่มเดียวกันอ่ะนะครับ นอกจาก input  ทีนี้ก่อนที่เราจะใส่ attribute ลงไปจะได้หน้าตาแบบนี้ครับ

ภาพประกอบ :: Jquery Before Add Class

ภาพประกอบ :: Jquery Before Add Class

แล้วพอเราใส่ class ลงไป

$("input").attr("class","form-control");

เราจะได้ออกมาแบบนี้ครับ

ภาพประกอบ : After Add Class

ภาพประกอบ : After Add Class

เท่านี้เราก็จะได้ class ที่ต้องการเข้ามาแล้ว แต่ทีนี้เวลาที่เราจะใส่ class จริงๆเรามักจะใช้ addClass() ซึ่งจะตรงกับการทำงานเสียมากกว่า แต่ตรงนี้หากเราต้องการเราก็จะใช้กับพวก title, name, alt, width, height หรือพวกที่เป็น attribute พิเศษใหม่ๆขึ้นมาเช่น data-id ซะมากกว่าครับ

เดี๋ยวผมจะลองเพิ่ม attribute ใหม่ลงไปอีกตัวเป็น data-id ให้เพิ่มลงไปที่ input ที่เอาไว้เก็บค่าชื่อของนักเรียนแล้วกันนะครับ

$("[name=student]").attr("data-id", "userid");

ค่าที่ได้จะออกมาเป็นแบบนี้ครับ

ภาพประกอบ : data-id

ภาพประกอบ : data-id

ซึ่งเราจะสามารถเอาออกไปใช้งานได้เลย แบบนี้เป็นวิธีการเพิ่มนะครับ แต่ต่อไปเราจะมาดูวิธีการลบออกไปบ้าง โดยผมจะใช้ความสามารถของ removeAttr() มาเป็นตัวช่วย โดยในตัวอย่างผมจะทำการลบ attribute ที่เป็น class ออกไปจาก input ตัวที่เก็บชื่อของนักเรียนออกไปนะครับ

$("[name=student]").removeAttr("class");

ผลออกมา input ตัวบนก็จะถูกลบ css ของ form-control ออกไปแบบนี้

ภาพประกอบ : remove attribute

ภาพประกอบ : remove attribute

เวลาลบอาจจะต้องระวังหน่อยนะครับ เราอาจจะใช้ if….else เข้ามาช่วยตรวจสอบให้มั่นใจเสียก่อนค่อยลบก็ได้ ทีนี้หากว่าเราต้องการที่จะเพิ่ม class เพียงบางครั้ง เพียงบางจังหวะ เราอาจจะใช้ความสามารถของการเพิ่มลบ class ในลักษณะของการทำ toggle class มาใช้ก็เป็นได้แต่ใช้ได้เฉพาะกับ class เท่านั้นอ่ะนะครับ โดยที่ผมจะทำการสร้างปุ่มขึ้นมาจำนวน 1 ปุ่ม เพื่อใช้เป็นจุดเชื่อมโยงในการเกิด event โดยเมื่อกดปุ่มแล้วก็จะทำการ toggle class เข้าและออก

<a href="#" id="mybtn" class="btn btn-primary">Button</a>

Code ในส่วนของ HTML ที่เพิ่มเข้าไปนะครับ และมีส่วนของ JS แบบนี้

$("#mybtn").click(function() {
$("[name=student]").toggleClass("form-control");
});

Code ชุดนี้จะไม่มีการใช้ความสามารถของ form-control ก่อนจนกว่าจะมีการกดปุ่มหนึ่งครั้งและหากมีการกดเพิ่มอีกหนึ่งครั้งก็จะทำการลบ class นั้นออกไปครับ

อ้างอิง URL : http://jquery.com/

 

ต้องการต้างพัฒนาเว็บไซต์หรือระบบเว็บแอพติดต่อ teerapuch

ต้องการต้างพัฒนาเว็บไซต์หรือระบบเว็บแอพติดต่อ line : teerapuch