การเปลี่ยนชื่อของ
element ใน
jquery นั้นจะแตกต่างออกไปจากการเปลี่ยน ID และ class จะใช้วิธีการลบไม่เหมือนกัน ซึ่งกรณีตัวอย่างนั้่นเราอาจจะอยากจะเปลี่ยนชื่อ
name ของ element นั้นเพื่ออะไรซักอย่างนั้นเราจะใช้โค้ดแบบเดียวกับ ID และ class ไม่ได้ ซึ่งในกระทู้ผมก็ได้ประสบปัญหาเกี่ยวกับเรื่องของการเปลี่ยนชื่อของ element ต่างๆด้วย jquery นี้แหละครับเพราะผมนั้นคิดว่าการเปลี่ยนชื่อของ element นั้นโค้ดนั้นจะเหมือนกันกับการเปลี่ยนชื่อ class หรือ ID แบบนั้น ซึ่งวิธีการเปลี่ยนนั้นก็ไม่ยากครับมาดูกันเลย
โดยเริ่มต้นนั้นเราจะทำการสร้างไฟร์ html ขึ้นมา ก่อนพร้อมกับ element ใดๆก็ได้ 1 object ที่เรานั้นจะทำการเปลี่ยนชื่อครับ
โค้ด: เลือกทั้งหมด
<div name="01" style="float:left; background-color: #1b95e0; width: 200px; height: 200px;"></div>
ครับซึ่งถ้าตามตัวอย่างนั้นเราก็จะได้ตัวกล่องสีเหลี่ยม 1 อันที่เป็นสีฟ้ามา โดยผมตั้งชื่อมันว่า 01 ละกันนะครับ ซึ่งการที่เรานั้นจะใช้งานตัว Jquery ได้เราต้องมีการเรียกใช้งานไฟร์ของ jquery มาใส่ในเว็บไซต์ของเราก่อนครับไม่งั้นเราก็จะใช้งานตัว jquery มาใช้งานไม่ได้ ซึ่งเราก็จะทำการเรียกใช้งาน jquery ดังนี้ที่ครับ
โค้ด: เลือกทั้งหมด
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
ซึ่งเราจะต้องทำการเรียกใช้งานจริงๆแล้วตรงไหนก็ได้แต่ถ้าจะให้ดีไปประกาศที่หัว เพื่อป้องกันการใช้งาน jquery หรือ ไฟร์ที่เราเรียกใช้งานก่อนที่เราจะเรียกใช้จะได้ไม่บัค
จากนั้นเราจะสร้างปุ่มขึ้นมา 1 ปุ่มที่เราจะเอา function ที่เมื่อเรากดปุ่มไปแล้วเราจะให้ทำฟังก์ชั่นเปลี่ยนชื่อ
โค้ด: เลือกทั้งหมด
<input type="button" id="name" value="เปลี่ยนชื่อ">
จากนั้นผมจะมาเขียนทางฝั่งของ javascript ต่อครับซึ่งผมจะเขียนให้เมื่อเราทำการกดปุ่มนั้นจะทำการเปลี่ยนชื่อ element ของเรา
โค้ด: เลือกทั้งหมด
<script>
$("#name").click(function(){
$("#01").attr("name","02")
})
</script>
ซึ่งผลลัพธ์ของเรานั้นก็จะได้ว่า เมื่อเรานั้นทำการกดปุ่มที่เราสรา้งขึ้นมานั้นเราจะทำการเปลี่ยนชื่อ กล่องของเราที่ใช้ ID ว่า 01 และทำการเปลี่ยนชื่อ เป็น 02 ครับ
- ผลลัพธ์ของการเปลี่ยน name
- ผลลัพธืของการเปลี่ยน name.gif (41.24 KiB) Viewed 241 times
ซึ่งก็จะเห็นได้ว่าการใช้งานการเปลี่ยนชื่อนั้นจะแตกต่างจากตัว
class และ
ID อยู่พอสมควรซึ่งผมได้พบเจอปัญหานี้ระหว่างทำโปรเจ็คผมจึงอยากที่เอามาแชร์กันว่า jquery นั้นเราสามารถเปลี่ยน name ของ element ได้อย่างไรครับ
อ้างอิง
https://www.tutorialspoint.com/jquery/attr-remove-attribute.htm
https://api.jquery.com/attr/
https://stackoverflow.com/questions/8659523/jquery-this-attrname
