jquery Pobierz atrybuty danych HTML 5 z myślnikami i czułością liter

HTML5 pozwala nam tworzyć własne, niestandardowe atrybuty do przechowywania danych. Niestandardowe atrybuty mogą być nazywane dowolnie, jak nazwy zmiennych, ale muszą być poprzedzone słowem "data", A Słowa są oddzielone myślnikami. Można dodać atrybuty danych" foo"," bar "i" Foo bar " do takiego wejścia:

<input type="button" class="myButton" value="click me" data-foo="bar" 
data-bar="baz" data-foo-bar="true">

JQuery ' S .data() metoda daje dostęp do atrybutów data-*.

Używając jQuery do wersji 1.4 włącznie, atrybuty danych były wielkości liter niewrażliwe, dlatego:

<input type="button" class="myButton" value="click me" data-productId="abc"/>

Byłoby dostępne z

$('.myButton').data('productId');

JQuery 1.5 i 1.6

<input type="button" class="myButton" value="click me" data-productId="abc"/>

Jest dostępny tylko z

$('.myButton').data('productid');

Dowolne atrybuty data-* stają się właściwościami obiektu dataset elementu. Nowe nazwy nieruchomości pochodzą w następujący sposób:

• nazwa atrybutu jest konwertowana na wszystkie małe litery.
• The data- prefiks jest usuwany z nazwy atrybutu.
• wszelkie myślniki są również usuwane z nazwy atrybutu.
• pozostałe znaki są konwertowane na CamelCase. Znaki bezpośrednio po myślnikach usuniętych w Kroku 3 stają się wielkimi literami.

Zwróć uwagę, że Oryginalna nazwa atrybutu data-product-id została przekonwertowana na productId w obiekcie dataset. Proces konwersji Nazwy musi być uwzględniony podczas nazywania atrybutów data-*. Ponieważ atrybut nazwy są konwertowane na małe litery, najlepiej unikać używania wielkich liter. Poniższy przykład pokazuje, jak kilka nazw atrybutów przekłada się na właściwości zbioru danych.

"data-productId"  translates to "productid"
"data-product-id" translates to "productId"
"data-PRODUCT-ID" translates to "productId"
"data-ProDUctId"  translates to "productid"

Uwaga:

• niestandardowe atrybuty danych są zwykle używane do przechowywania metadanych, które pomagają / upraszczają kod JavaScript.
• element może mieć dowolną liczbę własnych atrybutów danych.
• niestandardowe atrybuty danych powinny być używane tylko wtedy, gdy bardziej odpowiedni element lub atrybut nie istnieje. Na przykład nie należy tworzyć niestandardowego atrybutu "opis tekstowy" na obrazie. Istniejący atrybut alt jest lepszym wyborem.
• Specyfikacja HTML5 wyraźnie stwierdza data-* atrybuty nie powinny być używane przez aplikacje stron trzecich. Oznacza to, że programy takie jak wyszukiwarki nie powinny polegać na niestandardowych atrybutach danych podczas przygotowywania wyników wyszukiwania.

Implementacja własnych atrybutów w HTML5 sama w sobie nie jest skomplikowana technicznie, jednak prawdziwą trudnością jest wybór, czy właściwe jest wykorzystanie ich we własnych projektach, a jeśli tak, to jak to zrobić skutecznie. Na koniec pamiętaj, że jest jeszcze trochę za wcześnie, aby zacząć korzystać z podejścia dataset dla funkcji, na których opierają się Twoje strony, więc upewnij się, że zapewnisz alternatywę dla nieobsługujących przeglądarek.

DEMO