การใช้งาน jquery ในการเปลี่ยนชื่อของ element

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
ewqolf
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 621
ลงทะเบียนเมื่อ: 14/11/2022 9:26 am

การใช้งาน jquery ในการเปลี่ยนชื่อของ element

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

การเปลี่ยนชื่อของ 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
ผลลัพธืของการเปลี่ยน name.gif (41.24 KiB) Viewed 630 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
แก้ไขล่าสุดโดย ewqolf เมื่อ 30/01/2023 2:00 pm, แก้ไขไปแล้ว 1 ครั้ง.
คนจะตายเมื่อถูกฆ่า...ขอบคุณครับ
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41232
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: การใช้งาน jquery ในการเปลี่ยนชื่อของ element

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

id ไม่ควรตั้งเป็นภาษาไทย
เพื่อลดปัญหาที่จะเกิดขึ้นในอนาคต
ควรใช้ตามกฏการตั้งชื่อ a-z, A-Z,_,-,:,0-9

id เป็นแบบ case-sensitive
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

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