วิธีการเปลี่ยนแอตทริบิวต์ของชื่อองค์ประกอบโดยใช้ jQuery

ฉันมีองค์ประกอบป้อนข้อมูลในแบบฟอร์มและต้องการเปลี่ยนแอตทริบิวต์ชื่อ นี่ต้องเป็นเรื่องง่ายเหมือนพาย แต่ด้วยเหตุผลบางอย่างฉันไม่สามารถหาวิธีทำสิ่งนี้ได้ ทำสิ่งนี้ได้อย่างไรและฉันควรค้นหาวิธีทำสิ่งนี้ได้ที่ไหนและอย่างไร

ก่อนที่เราจะเขียนโค้ดใด ๆ เรามาพูดถึงความแตกต่างระหว่างคุณสมบัติและคุณสมบัติ แอตทริบิวต์การตั้งค่าที่คุณนำไปใช้กับองค์ประกอบในของคุณมาร์กอัป HTML ; เบราว์เซอร์จะแยกวิเคราะห์มาร์กอัปและสร้างวัตถุ DOM ของประเภทต่างๆที่มีคุณสมบัติที่เริ่มต้นด้วยค่าของคุณลักษณะ บนวัตถุ DOM เช่นแบบง่าย ๆHTMLElementคุณมักจะต้องการทำงานกับคุณสมบัติของมันไม่ใช่การรวบรวมคุณสมบัติ

แนวปฏิบัติที่เหมาะสมที่สุดในปัจจุบันคือการหลีกเลี่ยงการทำงานกับคุณลักษณะเว้นแต่ว่าจะกำหนดเองหรือไม่มีคุณสมบัติที่เทียบเท่าเพื่อเสริม เนื่องจากtitleไม่แน่นอนอยู่เป็นอ่าน / เขียนคุณสมบัติในหลายHTMLElements เราควรจะใช้ประโยชน์จากมัน

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับความแตกต่างระหว่างคุณลักษณะและคุณสมบัติที่นี่หรือที่นี่

ด้วยสิ่งนี้ในใจเราจัดการสิ่งนั้นtitle...

รับหรือตั้งค่าtitleคุณสมบัติขององค์ประกอบโดยไม่ต้อง jQuery

เนื่องจากtitleเป็นคุณสมบัติสาธารณะคุณสามารถตั้งค่าบนองค์ประกอบ DOM ใด ๆ ที่สนับสนุนด้วย JavaScript ธรรมดา:

document.getElementById('yourElementId').title = 'your new title';

การสืบค้นใกล้เคียงกัน ไม่มีอะไรพิเศษที่นี่:

var elementTitle = document.getElementById('yourElementId').title;

นี่จะเป็นวิธีที่เร็วที่สุดในการเปลี่ยนชื่อหากคุณเป็นคนที่ปรับปรุงประสิทธิภาพของถั่ว

รับหรือตั้งค่าtitle คุณสมบัติขององค์ประกอบด้วย jQuery (v1.6 +)

jQuery แนะนำวิธีการใหม่ใน v1.6 เพื่อรับและตั้งค่าคุณสมบัติ ในการตั้งค่าtitleคุณสมบัติบนองค์ประกอบให้ใช้:

$('#yourElementId').prop('title', 'your new title');

หากคุณต้องการดึงชื่อให้ละเว้นพารามิเตอร์ตัวที่สองและจับค่าส่งคืน:

var elementTitle = $('#yourElementId').prop('title');

ตรวจสอบprop()เอกสาร APIสำหรับ jQuery

หากคุณจริงๆไม่ต้องการที่จะใช้คุณสมบัติหรือคุณกำลังใช้รุ่นของ jQuery ก่อน v1.6 แล้วคุณควรอ่านเมื่อ:

รับหรือตั้งองค์ประกอบของtitle แอตทริบิวต์กับ jQuery (รุ่น <1.6)

คุณสามารถเปลี่ยนtitle คุณสมบัติด้วยรหัสต่อไปนี้:

$('#yourElementId').attr('title', 'your new title');

หรือดึงมันด้วย:

var elementTitle = $('#yourElementId').attr('title');

ตรวจสอบattr()เอกสาร APIสำหรับ jQuery

ในกล่องโต้ตอบ jquery ui modal คุณต้องใช้โครงสร้างนี้:

$( "#my_dialog" ).dialog( "option", "title", "my new title" );

ฉันเชื่อ

$("#myElement").attr("title", "new title value")

หรือ

$("#myElement").prop("title", "new title value")

ควรทำเคล็ดลับ ...

ฉันคิดว่าคุณสามารถหาฟังก์ชั่นหลักทั้งหมดในjQuery Docsได้แม้ว่าฉันจะเกลียดการจัดรูปแบบ

ตัวเลือกอื่นหากคุณต้องการคือรับองค์ประกอบ DOM จากวัตถุ jQuery และใช้ accessors DOM มาตรฐานบน:

$("#myElement")[0].title = "new title value";

"วิธี jQuery" ตามที่ผู้อื่นกล่าวถึงคือการใช้วิธีการ attr () ดูเอกสาร API สำหรับ attr () ที่นี่

jqueryTitle({
    title: 'New Title'
});

สำหรับชื่อแรก:

jqueryTitle('destroy');

https://github.com/ertaserdi/jQuery-Title

หากคุณกำลังสร้างdivและพยายามที่จะเพิ่มtitleมัน

ลอง

var myDiv= document.createElement("div");
myDiv.setAttribute('title','mytitle');

นอกเหนือจาก @ Cᴏʀʏ answer โปรดตรวจสอบให้แน่ใจว่าหัวเรื่องของคำแนะนำเครื่องมือนั้นยังไม่ได้ตั้งค่าด้วยตนเองในองค์ประกอบ HTML ในกรณีของฉันคลาส span สำหรับคำแนะนำเครื่องมือมีข้อความที่มีการแก้ไขอยู่แล้วเนื่องจากฟังก์ชัน JQuery ของฉัน$('[data-toggle="tooltip"]').prop('title', 'your new title');ไม่ทำงาน

เมื่อฉันลบแอตทริบิวต์ title ใน HTML span class jQuery ทำงานได้

ดังนั้น:

<span class="showTooltip" data-target="#showTooltip" data-id="showTooltip">
      <span id="MyTooltip" class="fas fa-info-circle" data-toggle="tooltip" data-placement="top" title="this is my pre-set title text"></span>
</span>

ควรจะเป็น:

<span class="showTooltip" data-target="#showTooltip" data-id="showTooltip">
      <span id="MyTooltip" class="fas fa-info-circle" data-toggle="tooltip" data-placement="top"></span>
</span>