JQuery kullanarak bir öğenin başlık özniteliği nasıl değiştirilir

Bir form giriş öğesi var ve başlık özniteliğini değiştirmek istiyorum. Bu turta kadar kolay olmalı, ama nedense bunu nasıl yapacağımı bulamıyorum. Bu nasıl yapılır ve bunun nasıl yapılacağı konusunda nerede ve nasıl arama yapmalıyım?

Herhangi bir kod yazmadan önce, özellikler ve özellikler arasındaki farkı tartışalım. Nitelikler, HTML işaretlemenizdeki öğelere uyguladığınız ayarlardır ; tarayıcı daha sonra işaretlemeyi ayrıştırır ve özniteliklerin değerleriyle başlatılan özellikleri içeren çeşitli türlerde DOM nesneleri oluşturur . Basit gibi DOM nesnelerinde, özellik koleksiyonu ile değil, HTMLElementneredeyse her zaman özellikleriyle çalışmak istersiniz .

Şu anki en iyi uygulama, özel olmadıkça veya ekleyecek eşdeğer bir özellik olmadığı sürece niteliklerle çalışmaktan kaçınmaktır. Yana titlegerçekten bir okuma / yazma olarak da bulunmazlar mülkiyet birçok üzerindeki HTMLElements, biz yararlanmak gerekir.

Nitelikler ve özellikler arasındaki fark hakkında daha fazla bilgiyi burada veya burada okuyabilirsiniz .

Bunu akılda tutarak, onu manipüle edelim title...

JQuery olmadan bir öğenin titleözelliğini alma veya ayarlama

Yana titlebir kamu malı, herhangi bir DOM öğesindeki bunu ayarlayabileceğini düz JavaScript destekleri it:

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

Erişim neredeyse aynıdır; burada özel bir şey yok:

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

Bu, bir optimizasyon somunuysanız başlığı değiştirmenin en hızlı yolu olacaktır, ancak jQuery'nin dahil olmasını istediğinizden beri:

JQuery (v1.6 +) ile bir öğenin title özelliğini alma veya ayarlama

jQuery, özellikleri almak ve ayarlamak için v1.6'da yeni bir yöntem tanıttı. titleÖzelliği bir öğeye ayarlamak için şunu kullanın:

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

Başlığı almak istiyorsanız, ikinci parametreyi atlayın ve dönüş değerini yakalayın:

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

JQuery için prop()API belgelerine bakın.

Eğer varsa gerçekten özelliklerini kullanmak istemiyorsanız veya v1.6 önce jQuery bir sürümünü kullanıyorsanız, o zaman okumaya devam etmelidir:

JQuery ile bir öğenin title niteliğini alma veya ayarlama (sürümler <1.6)

Değişebilirsin title niteliğini aşağıdaki kodla:

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

Veya şununla al:

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

JQuery için attr()API belgelerine bakın.

Jquery ui modal iletişim kutularında bu yapıyı kullanmanız gerekir:

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

İnanıyorum

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

veya

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

hile yapmalı ...

Ben biçimlendirme nefret rağmen jQuery Docs tüm temel fonksiyonları bulabilirsiniz düşünüyorum .

İsterseniz başka bir seçenek, DOM öğesini jQuery nesnesinden almak ve üzerinde standart DOM erişimcilerini kullanmak olacaktır:

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

Başkaları tarafından belirtildiği gibi "jQuery yolu", attr () yöntemini kullanmaktır. Burada attr () için API belgelerine bakın .

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

ilk başlık için:

jqueryTitle('destroy');

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

Bir oluşturuyorsanız divve buna bir ekleme yapmaya çalışıyorsanız title.

Deneyin

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

@ Cᴏʀʏ yanıtına ek olarak, araç ipucu başlığının HTML öğesinde önceden manuel olarak ayarlanmadığından emin olun. Benim durumumda, araç ipucu için span sınıfı zaten sabit bir tittle metni vardı, bu nedenle benim JQuery işlevi $('[data-toggle="tooltip"]').prop('title', 'your new title');çalışmadı.

HTML span sınıfındaki title özniteliğini kaldırdığımda jQuery çalışıyordu.

Yani:

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

Kod olmalı:

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