Cara mengubah atribut judul elemen menggunakan jQuery

Saya memiliki elemen input formulir dan ingin mengubah atribut judulnya. Ini harus semudah pie, tetapi untuk beberapa alasan saya tidak dapat menemukan cara melakukan ini. Bagaimana ini dilakukan, dan di mana dan bagaimana saya harus mencari cara untuk melakukan ini?

Sebelum kita menulis kode apa pun, mari kita bahas perbedaan antara atribut dan properti. Atribut adalah pengaturan yang Anda terapkan ke elemen dalam markup HTML Anda ; browser kemudian mem-parsing markup dan membuat objek DOM dari berbagai jenis yang berisi properti diinisialisasi dengan nilai-nilai atribut. Pada objek DOM, seperti sederhana HTMLElement, Anda hampir selalu ingin bekerja dengan propertinya , bukan koleksi atributnya .

Praktik terbaik saat ini adalah untuk menghindari bekerja dengan atribut kecuali itu adalah kebiasaan atau tidak ada properti yang setara untuk menambahnya. Sejak titlememang ada sebagai read / write properti pada banyak HTMLElement, kami harus mengambil keuntungan dari itu.

Anda dapat membaca lebih lanjut tentang perbedaan antara atribut dan properti di sini atau di sini .

Dengan mengingat hal ini, mari kita memanipulasi itu title...

Dapatkan atau Setel titleproperti elemen tanpa jQuery

Karena titleini adalah properti publik, Anda dapat mengaturnya pada elemen DOM yang mendukungnya dengan JavaScript biasa:

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

Pengambilan hampir identik; tidak ada yang istimewa di sini:

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

Ini akan menjadi cara tercepat untuk mengubah judul jika Anda orang yang optimis, tetapi karena Anda ingin jQuery terlibat:

Dapatkan atau Setel title properti elemen dengan jQuery (v1.6 +)

jQuery memperkenalkan metode baru di v1.6 untuk mendapatkan dan mengatur properti. Untuk mengatur titleproperti pada suatu elemen, gunakan:

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

Jika Anda ingin mengambil judul, hapus parameter kedua dan ambil nilai kembali:

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

Lihat prop()dokumentasi API untuk jQuery.

Jika Anda benar-benar - tidak ingin menggunakan properti, atau Anda menggunakan versi jQuery sebelum v1.6, maka Anda harus membaca terus:

Dapatkan atau Setel title atribut elemen dengan jQuery (versi <1.6)

Anda dapat mengubah title atribut dengan kode berikut:

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

Atau ambil dengan:

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

Lihat attr()dokumentasi API untuk jQuery.

Dalam dialog modal jquery ui Anda perlu menggunakan konstruk ini:

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

Saya percaya

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

atau

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

harus melakukan trik ...

Saya pikir Anda dapat menemukan semua fungsi inti di jQuery Docs , meskipun saya benci formatnya.

Opsi lain, jika Anda mau, adalah untuk mendapatkan elemen DOM dari objek jQuery dan menggunakan pengakses DOM standar di atasnya:

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

"Cara jQuery", sebagaimana disebutkan oleh orang lain, adalah menggunakan metode attr (). Lihat dokumentasi API untuk attr () di sini .

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

untuk judul pertama:

jqueryTitle('destroy');

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

Jika Anda membuat divdan mencoba menambahkannya title.

Mencoba

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

Sebagai tambahan jawaban @ Cᴏʀʏ, pastikan judul tooltip belum diatur secara manual di elemen HTML. Dalam kasus saya, kelas span untuk tooltip sudah memiliki teks judul tetap, karena ini fungsi JQuery saya $('[data-toggle="tooltip"]').prop('title', 'your new title');tidak berfungsi.

Ketika saya menghapus atribut judul di kelas rentang HTML, jQuery berfungsi.

Begitu:

<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>

Harus becode:

<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>