Jak zmienić atrybut tytułu elementu za pomocą jQuery

226

Mam element wejściowy formularza i chcę zmienić jego atrybut tytułu. To musi być łatwe jak ciasto, ale z jakiegoś powodu nie mogę znaleźć, jak to zrobić. Jak to się robi i gdzie i jak powinienem szukać, jak to zrobić?

Brian
źródło

Odpowiedzi:

463

Zanim napiszemy kod, omówmy różnicę między atrybutami a właściwościami. Atrybuty to ustawienia stosowane do elementów w znacznikach HTML ; przeglądarka następnie analizuje znaczniki i tworzy obiekty DOM różnych typów, które zawierają właściwości zainicjowane wartościami atrybutów. Na obiektach DOM, takich jak proste HTMLElement, prawie zawsze chcesz pracować z jego właściwościami , a nie kolekcją atrybutów .

Obecną najlepszą praktyką jest unikanie pracy z atrybutami, chyba że są one niestandardowe lub nie istnieje równoważna właściwość do ich uzupełnienia. Ponieważ titlerzeczywiście istnieje wiele właściwości odczytu / zapisu HTMLElement, powinniśmy z niego skorzystać.

Możesz przeczytać więcej na temat różnicy między atrybutami i właściwościami tutaj lub tutaj .

Mając to na uwadze, zmanipulujmy, że title...

Uzyskaj lub ustaw titlewłaściwość elementu bez jQuery

Ponieważ titlejest to własność publiczna, możesz ustawić ją na dowolnym elemencie DOM, który ją obsługuje za pomocą zwykłego JavaScript:

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

Wyszukiwanie jest prawie identyczne; nic specjalnego tutaj:

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

To będzie najszybszy sposób zmiany tytułu, jeśli jesteś optymistą, ale ponieważ chciałeś zaangażować jQuery:

Pobierz lub ustaw title właściwość elementu za pomocą jQuery (v1.6 +)

jQuery wprowadził nową metodę w wersji 1.6, aby uzyskać i ustawić właściwości. Aby ustawić titlewłaściwość elementu, użyj:

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

Jeśli chcesz odzyskać tytuł, pomiń drugi parametr i przechwyć zwracaną wartość:

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

Sprawdź prop()dokumentację API dla jQuery.

Jeśli naprawdę nie chcesz używać właściwości lub korzystasz z wersji jQuery wcześniejszej niż 1.6, powinieneś przeczytać:

Uzyskaj lub ustaw title atrybut elementu za pomocą jQuery (wersje <1.6)

Możesz zmienić title atrybut za pomocą następującego kodu:

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

Lub pobierz go za pomocą:

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

Sprawdź attr()dokumentację API dla jQuery.

Cᴏʀʏ
źródło
5
Jeśli nie jest to dobrze skonstruowana odpowiedź, nie ma. I jest tak dokładny, jak dobrze skonstruowany. +1 ... (och, a także twoje imię jest niesamowite, ponieważ jest moje :) nawet przeliterowało to samo!)
VoidKing
@VoidKing: Mam tendencję do ponownego odwiedzania i tworzenia aktualnych odpowiedzi, które stają się popularne (z których mam tylko kilka). Staram się zapewnić wszystko, co chciałbym znaleźć, gdybym badał lub zadawał pytanie. Cieszę się, że to znalazłeś!
Cᴏʀʏ
@Cory Cóż, szczerze mówiąc, szukałem czegoś innego (było to dalekie ujęcie, ale szukałem, czy jest jakiś sposób na stylizację domyślnego pola tytułu HTML). Nie znalazłem tego, czego szukałem, ale naprawdę podziwiałem wysiłek włożony w tę odpowiedź (pokazałeś zasoby, czyste .js i jQuery itp.). W każdym razie fajna odpowiedź!
VoidKing
@VoidKing: To prawdopodobnie niewłaściwe miejsce do odpowiedzi, ale jeśli mówisz o domyślnych podpowiedziach, które pojawiają się po najechaniu myszką na elementy z atrybutami alt lub title, być może ta odpowiedź da ci pewien wgląd.
Cᴏʀʏ
@Cory Dziękuję, Sir!
VoidKing
31

W modalnych oknach dialogowych interfejsu użytkownika jquery musisz użyć tej konstrukcji:

$( "#my_dialog" ).dialog( "option", "title", "my new title" );
Igor L.
źródło
3
Ratownik!! Podczas korzystania z głosowanej odpowiedzi powyżej tytuł jest zmieniany jeden raz, a następnie tytuł nie zmienia się, chyba że użyjesz opcji tytułu w oknie dialogowym !! DZIĘKUJE SOOOOOOO DUŻO!
Ryan Ellis,
Cieszę się, że przeczytałem komentarze ;-) Jeśli chcesz zmienić tytuł kilka razy, musisz ustawić go w opcjach okna dialogowego.
Michel
Nigdy bym nie pomyślał, że tyle razy zostanie to zaakceptowane. Bardzo się cieszę, że to pomogło :-)
Igor L.
15

ja wierzę

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

lub

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

powinien załatwić sprawę ...

Myślę, że wszystkie podstawowe funkcje można znaleźć w jQuery Docs , chociaż nie znoszę formatowania.

womp
źródło
7

Inną opcją, jeśli wolisz, byłoby pobranie elementu DOM z obiektu jQuery i użycie na nim standardowych akcesoriów DOM:

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

„Sposób jQuery”, jak wspominają inni, polega na użyciu metody attr (). Zobacz dokumentację API dla attr () tutaj .

Greg Campbell
źródło
2
jqueryTitle({
    title: 'New Title'
});

dla pierwszego tytułu:

jqueryTitle('destroy');

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

Erdi Ertaş
źródło
Ten problem można rozwiązać za pomocą samej biblioteki jquery. Powinieneś odnosić się do korzystania z bibliotek innych firm tylko wtedy, gdy wspomina o nich OP, lub nie można tego osiągnąć bez korzystania z biblioteki innej firmy.
Avishek
Tak, ale są też inne funkcje. Proste, ale miłe rozwiązanie ... Możesz zbadać ...
Erdi Ertaş
istniałby narzut http związany z transportem biblioteki innej firmy, której można by uniknąć za pomocą standardowych metod.
Avishek
ponadto istnieje już szeroko akceptowana odpowiedź, która jest bardziej wydajna.
Avishek
2

Jeśli tworzysz divi próbujesz dodać titledo niego.

Próbować

var myDiv= document.createElement("div");
myDiv.setAttribute('title','mytitle');
R Singh
źródło
0

Jako dodatek do odpowiedzi @ Cᴏʀʏ upewnij się, że tytuł podpowiedzi nie został wcześniej ustawiony ręcznie w elemencie HTML. W moim przypadku klasa rozpiętości podpowiedzi miała już stały tekst tytułowy, z tego powodu moja funkcja JQuery $('[data-toggle="tooltip"]').prop('title', 'your new title');nie działała.

Kiedy usunąłem atrybut title w klasie span HTML, jQuery działało.

Więc:

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

Powinien być:

<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>
Nicolas
źródło