Özniteliği değersiz ayarla

194

JQuery'ye değer eklemeden veri özniteliğini nasıl ayarlarım? Bunu istiyorum:

<body data-body>

Denedim:

$('body').attr('data-body'); // this is a getter, not working
$('body').attr('data-body', null); // not adding anything

Diğer her şey ikinci argümanları dize olarak ekliyor gibi görünüyor. Değersiz bir özellik ayarlamak mümkün mü?

— David Hellsing
kaynak

3

Neden Gereklidir data-bodyVS. data-body=""?

— Patlama Hapları

En azından XHTML kullanmak istiyorsanız, özellik minimizasyonuna izin verilmediğinden bunu yapmamalısınız .

— Matthias

9

XHTML kullanmıyorum, HTML5 kullanıyorum

— David Hellsing

2

@ user1689607 çünkü oluşturulan HTML'yi bir dize olarak kaydediyorum ve daha sonra geriye doğru arama yapmam gerekiyor.

— David Hellsing

4

@ ExplosionPills Bir örnek requiredHTML5 form doğrulaması özelliğidir. Eminim başka birçok geçerli kullanım durumu vardır.

— Sıfır3

251

attr()Fonksiyon aynı zamanda, bir ayarlayıcı fonksiyonudur. Boş bir dize iletebilirsiniz.

$('body').attr('data-body','');

Boş bir dize, değeri olmayan bir özellik oluşturur.

<body data-body>

Referans - http://api.jquery.com/attr/#attr-attributeName-value

attr (özellikAdı, değer)

— Lix
kaynak

24

+1, ancak OP bunun bir pasör olduğunu biliyor. Boş bir ipin geçmesinin işe yarayıp yaramadığı nullbiraz şaşırtıcıdır.

— Jon

2

Javasctipt'in bazı garip davranışları var . Bu tuhaflıkların nerede olduğunu bilmek, sürpriz unsurunu çıkaracaktır: P

— Lix

25

Not: Bu jQuery 1.7.2 ile çalışmıyor (Bu en son sürüm olmadığını biliyorum) ama $(el).prop('data-body', true)benim için çalıştı nerede benim için $(el).attr('data-body', '')data-body = "data-body" ayarı sona erdi.

— Patrick O'Doherty

6

@ PatrickO'Doherty $(el).prop('data-body', true)benim için çalışmıyor. attr()çalışır, ancak eklemek istediğim özelliğin değeri olarak boş bir dize ekler.

— Webdevotion

1

@Andrew removeAttr / prop işlevlerini aradığınıza inanıyorum . Hangi özelliği kaldırmaya çalıştığınıza bağlıdır.

— Lix

47

Belki de deneyin:

var body = document.getElementsByTagName('body')[0];
body.setAttribute("data-body","");

— Callum McLean
kaynak

2

Sadece bu çözüm benim için çalıştıvar btn = $(this).get(0); btn.setAttribute("disabled","");

— gkiko

1

Burada diğer tüm çözümlerde ve yorumlarda önerildiği gibi .attr ve .prop ile uğraştıktan sonra, sonunda yerel JS'ye geri döndüğünü (veya en azından "yarı yol" geri döndüğünü), yukarıdaki yorum ... Şerefe!

— TheCuBeMan

22

Kabul edilen cevap artık yalnızca isim niteliğinde bir özellik oluşturmuyor (Eylül 2017 itibarıyla).

Yalnızca ad öznitelikleri oluşturmak için JQuery prop () yöntemini kullanmalısınız.

$(body).prop('data-body', true)

— Charlie
kaynak

Aslında seçim seçeneğime sadece "değer" yerine "değer = 'true" ekliyorum. Ugh.

— RonLugge

Kabul edilen cevabın bu çözümü nasıl içermediğini merak ediyordum! jquery kullanmanın en temiz yolu.

— Haziran'da

Belirli açılır seçeneklerde çalışmıyor, ne yazık ki Chrome'da

— MC9000

7

Bunu jQuery olmadan yapabilirsiniz!

Misal:

document.querySelector('button').setAttribute('disabled', '');

<button>My disabled button!</button>

Snippet'i genişlet

Devre dışı gibi bir Boolean özniteliğinin değerini ayarlamak için herhangi bir değer belirtebilirsiniz. Boş bir dize veya özniteliğin adı önerilen değerlerdir. Önemli olan tek şey, eğer öznitelik gerçek değerine bakılmaksızın mevcutsa, değerinin doğru olduğu kabul edilir. Özelliğin olmaması, değerinin yanlış olduğu anlamına gelir. Devre dışı bırakılan özniteliğin değerini boş dizeye ("") ayarlayarak, devre dışı ayarını true değerine ayarlarız, bu da düğmenin devre dışı bırakılmasına neden olur.

Gönderen MDN Element.setAttribute ()

— LipESprY
kaynak

1

jQuery bu konuda çok karışık. Javascript yapmak için en iyisi jquery veya tarayıcıları her değiştiğinde kendinizi deli sürücü. Bu, tüm bu hatalı istemci çerçeveleri için geçerlidir.

— MC9000

1

Bunun gerçekten yararlı olup olmadığından veya neden bu stili tercih ettiğimden emin değilim (yaptığım şey (vanilya js'de):

document.querySelector('#selector').toggleAttribute('data-something');

Bu, niteliği bir değer olmadan tüm küçük harflere ekler veya öğede zaten varsa kaldırır.

https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute

— Brent N.
kaynak