Ustaw atrybut bez wartości

194

Jak ustawić atrybut danych bez dodawania wartości w jQuery? Chcę to:

<body data-body>

Próbowałem:

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

Wszystko inne wydaje się dodawać drugie argumenty jako ciąg. Czy można ustawić atrybut bez wartości?

— David Hellsing
źródło

3

Dlaczego trzeba data-bodyVs. data-body=""?

— Tabletki przeciwwybuchowe

Przynajmniej jeśli chcesz używać XHTML, nie powinieneś tego robić, ponieważ minimalizacja atrybutów nie jest dozwolona.

— Matthias

9

Nie używam XHTML, używam HTML5

— David Hellsing

2

@ user1689607, ponieważ zapisuję wygenerowany kod HTML jako ciąg i później muszę wykonać wyszukiwanie wsteczne.

— David Hellsing

4

@ExplosionPills Jednym z przykładów jest requiredatrybut sprawdzania poprawności formularza HTML5. Jestem pewien, że istnieje wiele innych ważnych przypadków użycia.

— Zero3,

250

Ta attr()funkcja jest również funkcją ustawiającą. Możesz po prostu przekazać mu pusty ciąg.

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

Pusty ciąg utworzy po prostu atrybut bez wartości.

<body data-body>

Odwołanie - http://api.jquery.com/attr/#attr-attributeName-value

attr (nazwa_atrybutu, wartość)

— Lix
źródło

24

+1, ale PO wie, że to seter. Fakt, że przekazanie pustego łańcucha działa, ale nullnie jest zaskakujący.

— Jon

2

JavaScript działa dziwnie . Wiedząc, gdzie zdarzają się te dziwactwa, usuniesz element zaskoczenia: P

— Lix

25

Uwaga: To nie działa z jQuery 1.7.2 (wiem, że to nie jest najnowsza wersja), ale użycie $(el).prop('data-body', true)działało dla mnie, gdzie $(el).attr('data-body', '')skończyło się dla mnie ustawianie data-body = "data-body".

— Patrick O'Doherty

6

@ PatrickO'Doherty $(el).prop('data-body', true)nie działa dla mnie. attr()działa, ale dodaje również pusty ciąg jako wartość atrybutu, który chcę dodać.

— Webdevotion

1

@Andrew Uważam, że szukasz funkcji removeAttr / prop . To zależy, który atrybut próbujesz usunąć.

— Lix

47

Może spróbuj:

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

— Callum McLean
źródło

2

Tylko to rozwiązanie działało dla mnievar btn = $(this).get(0); btn.setAttribute("disabled","");

— gkiko

1

Po zabawie w .attr i .prop, jak zasugerowano we wszystkich innych rozwiązaniach i komentarzach tutaj, w końcu odkryłem, że wracając (lub przynajmniej „w połowie” wstecz) do natywnej JS, zrobiłem lewę, jak sugerowano w komentarz powyżej ... Na zdrowie!

— TheCuBeMan

22

Odpowiedź Zaakceptowany nie utworzyć atrybut name tylko już (od września 2017).

Należy użyć metody prop () JQuery, aby utworzyć atrybuty tylko nazwy.

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

— Charlie
źródło

Wydaje mi się, że dodawałem „value = 'true'” do mojej opcji select, zamiast po prostu „value”. Ugh.

— RonLugge

zastanawiałem się, w jaki sposób zaakceptowana odpowiedź nie zawiera tego rozwiązania! to najczystszy sposób przy użyciu jquery.

— den.

Nie działa w wybranych opcjach rozwijanych, niestety w Chrome

— MC9000,

7

Możesz to zrobić bez jQuery!

Przykład:

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

<button>My disabled button!</button>

Rozwiń fragment kodu

Aby ustawić wartość atrybutu boolowskiego, takiego jak wyłączony, możesz podać dowolną wartość. Pusty ciąg lub nazwa atrybutu są zalecanymi wartościami. Liczy się tylko to, że jeśli atrybut jest w ogóle obecny, niezależnie od jego rzeczywistej wartości, jego wartość jest uważana za prawdziwą. Brak atrybutu oznacza, że jego wartość jest fałszywa. Ustawiając wartość atrybutu disabled na pusty ciąg („”), ustawiamy wyłączone na wartość true, co powoduje wyłączenie przycisku.

Od MDN Element.setAttribute ()

— LipESprY
źródło

1

Pod tym względem jQuery jest zbyt płatny. Najlepiej zrobić w javascript, abyś nie doprowadzał się do szaleństwa przy każdej zmianie jquery lub przeglądarki. Dotyczy to wszystkich tych błędnych ram klienckich.

— MC9000,

1

Nie jestem pewien, czy to jest naprawdę korzystne lub dlaczego wolę ten styl, ale to, co robię (w waniliowym js) to:

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

Spowoduje to dodanie atrybutu małymi literami bez wartości lub usunięcie go, jeśli już istnieje na elemencie.

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

— Brent N.
źródło