web-dev-qa-db-fra.com

jquery get HTML 5 Data Attributes with hyphens and Case Sensitivity

Comment obtenir des attributs de données en utilisant jquery .data() ? Dans ce cas, html5 data-* les attributs sont-ils convertis en minuscules et en chameau? Quelles sont les principales règles à suivre lors de l'utilisation d'attributs personnalisés pour stocker des données?

<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"/>
jqueryhtmlhtml5custom-data-attributejquery-data
35
Unknown

HTML5 nous permet de créer nos propres attributs personnalisés pour stocker des données. Les attributs personnalisés peuvent être appelés tout ce que nous aimons, comme les noms de variables, mais ils doivent être précédés du mot "données", et les mots sont séparés par des tirets. Vous pouvez ajouter des attributs de données "foo", "bar" et "foo bar" à une entrée comme celle-ci:

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

la méthode .data() de jQuery vous donnera accès aux attributs data-*.

En utilisant jQuery jusqu'à la version 1.4 incluse, les attributs de données étaient insensibles à la casse, donc:

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

serait accessible avec

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

jQuery 1.5 et 1.6

Cependant, les changements dans jQuery 1.5 et 1.6 signifient que les attributs de données sont maintenant forcés à minuscules, donc:

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

n'est accessible qu'avec

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

Tous les attributs data-* Deviennent les propriétés de l'objet d'ensemble de données de l'élément. Les nouveaux noms de propriété sont dérivés comme suit:

  • Le nom d'attribut est converti en toutes les lettres minuscules.
  • Le préfixe data- Est supprimé du nom d'attribut.
  • Tous les traits d'union sont également supprimés du nom d'attribut.
  • Les caractères restants sont convertis en CamelCase. Les caractères suivant immédiatement les tirets supprimés à l'étape 3 deviennent en majuscules.

Notez que le nom d'attribut d'origine data-product-id A été converti en productId dans l'objet d'ensemble de données. Le processus de conversion de nom doit être pris en compte lors de la dénomination des attributs data-*. Étant donné que les noms d'attribut sont convertis en minuscules, il est préférable d'éviter d'utiliser des lettres majuscules. L'exemple suivant montre comment plusieurs noms d'attribut se traduisent en propriétés d'ensemble de données.

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

REMARQUE:

  • Les attributs de données personnalisés sont généralement utilisés pour stocker des métadonnées qui facilitent/simplifient le code JavaScript.
  • Un élément peut avoir un nombre quelconque d'attributs de données personnalisés.
  • Les attributs de données personnalisés ne doivent être utilisés que s'il n'existe pas d'élément ou d'attribut plus approprié. Par exemple, vous ne devez pas créer d'attribut de "description textuelle" personnalisé sur une image. L'attribut alt existant est un meilleur choix.
  • La spécification HTML5 indique clairement que les attributs data-* Ne doivent pas être utilisés par des applications tierces. Cela signifie que les programmes tels que les moteurs de recherche ne doivent pas s'appuyer sur des attributs de données personnalisés lors de la préparation des résultats de la recherche.

L'implémentation d'attributs personnalisés en HTML5 n'est pas techniquement complexe en soi, mais la vraie difficulté est de choisir s'il convient de les utiliser dans vos propres projets, et si oui, comment s'y prendre efficacement. Enfin, n'oubliez pas qu'il est encore un peu tôt pour commencer à utiliser l'approche de l'ensemble de données pour les fonctions sur lesquelles vos pages dépendent, alors assurez-vous de fournir une alternative pour les navigateurs non compatibles.

DÉMO

92
Unknown