jquery ne peut pas obtenir la valeur d'attribut 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 se déclenche mais la variable x10Device reste undefined .

je suis sur jquery 1.7.1.

jQuery:

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

HTML:

<button class="toggleStatus" data-X10="C5">

Je ne vois pas ce qui ne va pas.

58
demandé sur Cœur 2013-06-27 23:06:41
la source

6 ответов

la méthode de jQuery data() vous donnera accès aux attributs data-* , mais, elle bloque le cas du nom de l'attribut. Vous pouvez utiliser ceci:

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

ou, vous pouvez utiliser la méthode attr() , qui préserve 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 allez modifier l'attribut data-* d'un élément, vous devez utiliser attr() . data() Lira la valeur une fois initialement, puis continuera à retourner une copie mise en cache, tandis que attr() relira l'attribut à chaque fois.

notez que jQuery convertira également les traits d'Union dans le nom de l'attribut en cas de chameau ( source -- i.e. data-some-data == $(ele).data('someData') ). Ces deux conversions sont en conformité avec le HTML spécification, qui stipule que les attributs de données personnalisées ne doivent pas contenir de majuscules, et que les traits d'Union seront Camel-cased dans la propriété dataset ( source ). la méthode data de jQuery imite simplement/conforme à ce comportement standard.

Documentation

124
répondu Chris Baker 2014-07-26 21:21:28
la source

Iyap . Son travail Cas sensible dans le nom de données données-x10

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

3
répondu Indra 2016-02-12 12:58:56
la source

Utiliser du javascript méthodes

$x10Device = this.dataset("x10");
1
répondu Yana Agun Siswanto 2015-06-18 11:05:40
la source

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

1
répondu Marvin Glenn Lacuna 2016-07-21 12:59:05
la source

vous pouvez changer les attributs du sélecteur et des données comme vous le souhaitez!

 <select id="selectVehicle">
       <option value="1" data-year="2011">Mazda</option>
       <option value="2" data-year="2015">Honda</option>
       <option value="3" data-year="2008">Mercedes</option>
       <option value="4" data-year="2005">Toyota</option>
  </select>

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

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

1
répondu curiousBoy 2016-08-20 10:19:24
la source

assurez-vous de vérifier si l'événement lié au clic de bouton ne se propage pas aux éléments enfants comme une étiquette d'icône ( <i class="fa... ) à l'intérieur du bouton par exemple , de sorte que cette propagation peut vous faire manquer le bouton $(this).attr('data-X10') et appuyer sur l'étiquette d'icône.

<button data-x10="C5">
    <i class="fa fa-check"></i> Text
</button>

$('button.toggleStatus').on('click', function (event) {
    event.preventDefault();
    event.stopPropagation();
    $(event.currentTarget).attr('data-X10');
});
1
répondu Everton Z. P. 2017-08-21 06:29:47
la source

Autres questions sur