jquery získať HTML 5 atribúty údajov s pomlčkami a citlivosťou puzdier - jquery, html, html5, vlastné-data-atribút, jquery-data

Ako získať atribúty údajov pomocou jQuery .data()? V takom prípade html5 data-* konvertuje atribúty na malé a veľké písmená? Aké sú všetky hlavné pravidlá, ktoré treba dodržiavať pri používaní vlastných atribútov na ukladanie údajov?

<input type="button" class="myButton" value="click me" data-productId="abc"/>
<input type="button" class="myButton" value="click me" data-product-id="abc"/>
<input type="button" class="myButton" value="click me" data-PRODUCT-ID="abc"/>
<input type="button" class="myButton" value="click me" data-ProDUctId="abc"/>

odpovede:

90 pre odpoveď č. 1

HTML5 nám umožňuje vytvárať si vlastné zvykyatribúty na ukladanie údajov. Vlastné atribúty sa dajú nazvať čímkoľvek, čo sa nám páči, napríklad názvy premenných, ale je potrebné ich doplniť slovom „data“, slová sú oddelené pomlčkami. K vstupu, ako je tento, môžete pridať dátové atribúty „foo“, „bar“ a „foo bar“.

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

jQuery "s .data() metóda vám umožní prístup k data-* atribúty.

Pri použití jQuery až do verzie 1.4 vrátane atribúty dát nerozlišovali malé a veľké písmená, preto:

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

by bolo prístupné s

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

jQuery 1.5 a 1.6

Zmeny v jQuery 1.5 a 1.6 však znamenajú, že atribúty údajov sú teraz nútené písať malými písmenami, takže:

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

je prístupný iba s

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

akýkoľvek data-* atribúty sa stávajú vlastnosťami objektu množiny údajov prvku. Názvy nových vlastností sú odvodené takto:

• Názov atribútu sa prevedie na všetky malé písmená.
• Na data- predpona je odstránená z názvu atribútu.
• Z názvu atribútu sa odstránia aj všetky pomlčky.
• Zvyšné znaky sa prevedú na CamelCase. Znaky bezprostredne za pomlčkami odstránenými v kroku 3 sa zmenia na veľké.

Všimnite si, že pôvodný názov atribútu data-product-id bol prevedený na productId v objekte množiny údajov. Pri menovaní je potrebné zohľadniť proces prevodu mien data-* atribúty. Pretože sa názvy atribútov konvertujú na malé písmená, je lepšie vyhnúť sa používaniu veľkých písmen. Nasledujúci príklad ukazuje, ako sa niekoľko názvov atribútov prekladá do vlastností množiny údajov.

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

POZNÁMKA:

• Atribúty vlastných údajov sa zvyčajne používajú na ukladanie metadát, ktoré pomáhajú / zjednodušujú kód JavaScript.
• Element môže mať ľubovoľný počet vlastných atribútov údajov.
• Vlastné atribúty údajov by sa mali používať, iba ak avhodnejší prvok alebo atribút neexistuje. Napríklad by ste na obrázku nemali vytvárať vlastný atribút „textový popis“. Existujúce alt atribút je lepšou voľbou.
• Špecifikácia HTML5 jasne uvádza data-* atribúty by aplikácie tretích strán nemali používať. To znamená, že programy ako vyhľadávače by sa nemali pri príprave výsledkov vyhľadávania spoliehať na vlastné atribúty údajov.

Implementácia vlastných atribútov do HTML5 nie jetechnicky zložité samo osebe, skutočnou ťažkosťou však je rozhodnúť sa, či je vhodné ich použiť vo vlastných projektoch, a ak áno, ako na to efektívne. Na záver nezabudnite, že je ešte trochu skoro začať používať prístup k množine údajov pre funkcie, na ktoré sa vaše stránky spoliehajú, takže nezabudnite poskytnúť alternatívu pre nepodporujúce prehľadávače.

DEMO

---