jquery ne peut pas obtenir la valeur de l’atsortingbut de données

J’essaie de définir une variable dans jQuery. La valeur est supposée être définie sur l’événement de clic du bouton. L’événement onclick est déclenché mais la variable x10Device rest undefined .

Je suis sur jquery 1.7.1.

jQuery:

  $x10Device = $(this).data("X10");

HTML:

Je ne peux pas voir ce qui ne va pas.

La méthode data() de jQuery vous donnera access aux atsortingbuts data- data-* , MAIS, elle interrompt la casse du nom de l’atsortingbut. Vous pouvez soit utiliser ceci:

 $('#myButton').data("x10") // note the lower case

Ou, vous pouvez utiliser la méthode attr() , qui conserve votre cas:

 $('#myButton').attr("data-X10")

Essayez les deux méthodes ici: http://jsfiddle.net/q5rbL/

Sachez que ces approches ne sont pas totalement équivalentes. Si vous modifiez l’atsortingbut data-* d’un élément, vous devez utiliser attr() . data() lira la valeur une fois initialement, puis continuera à renvoyer une copie en cache, alors attr() relira l’atsortingbut à chaque fois.

Notez que jQuery convertira également les traits d’union dans le nom d’atsortingbut en casse camel ( source – c’est data-some-data == $(ele).data('someData') dire data-some-data == $(ele).data('someData') ). Ces deux conversions sont conformes à la spécification HTML, qui stipule que les atsortingbuts de données personnalisés ne doivent pas contenir de majuscules et que les traits d’union sont encadrés dans la propriété du dataset ( source ). La méthode de data de jQuery data fait que simuler / se conformer à ce comportement standard.

Documentation

data – http://api.jquery.com/data/
attr – http://api.jquery.com/attr/
Sémantique et structure HTML, atsortingbuts de données personnalisés – http://www.w3.org/html/wg/drafts/html/master/dom.html#custom-data-atsortingbute

Iyap. Son travail sensible à la casse dans le nom de données data-x10

var variable = $('#myButton').data("x10"); // nous obtenons la valeur de l’atsortingbut de données personnalisé

Utiliser des méthodes javascript simples

 $x10Device = this.dataset("x10");

Changer le boîtier à toutes les minuscules a fonctionné pour moi.

Vous pouvez modifier le sélecteur et les atsortingbuts de données comme vous le souhaitez!

   $("#selectVehicle").change(function () { alert($(this).find(':selected').data("year")); });

Voici l’exemple de travail: https://jsfiddle.net/ed5axgvk/1/

Assurez-vous de vérifier si l’événement lié au clic sur le bouton ne se propage pas aux éléments enfants sous la forme d’une icône ( Text $('button.toggleStatus').on('click', function (event) { event.preventDefault(); event.stopPropagation(); $(event.currentTarget).attr('data-X10'); });