tiene - obtener valor de un boton jquery

jquery no puede obtener el valor del atributo de datos

Question

Estoy tratando de establecer una variable en jQuery. Se supone que el valor se establece en el evento click del botón. El evento onclick se activa pero la variable x10Device permanece undefined .

Estoy en jquery 1.7.1.

jQuery:

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

HTML:

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

No puedo ver lo que está mal.

Answer 1

¡Puede cambiar el selector y los atributos de datos como desee!

 <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"));
});

Aquí está el ejemplo de trabajo: https://jsfiddle.net/ed5axgvk/1/

Answer 2

Asegúrese de comprobar si el evento relacionado con el clic del botón no se está propagando a elementos secundarios como una etiqueta de icono ( <i class="fa... ) dentro del botón, por ejemplo , por lo que esta propagación puede hacer que pierda el botón $(this).attr(''data-X10'') y pulse la etiqueta del icono.

<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'');
});

Answer 3

Cambiar la carcasa a todas las minúsculas funcionó para mí.

Answer 4

El método de jQuery data() le dará acceso a los atributos data-* , PERO, reduce el caso del nombre del atributo. Puedes usar esto:

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

O bien, puede usar el método attr() , que preserva su caso:

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

Pruebe ambos métodos aquí: http://jsfiddle.net/q5rbL/

Tenga en cuenta que estos enfoques no son completamente equivalentes. Si va a cambiar el atributo data-* de un elemento, debe usar attr() . data() leerá el valor una vez inicialmente, luego continuará devolviendo una copia en caché, mientras que attr() volverá a leer el atributo cada vez.

Tenga en cuenta que jQuery también convertirá guiones en el nombre del atributo a camel case ( source - es decir, data-some-data == $(ele).data(''someData'') ). Ambas conversiones están en conformidad con la especificación HTML, que dicta que los atributos de datos personalizados no deben contener letras mayúsculas, y que los guiones serán camel-cased en la propiedad del dataset ( source ). El método de data de jQuery es simplemente imitar / conformarse a este comportamiento estándar.

Documentación

• data - http://api.jquery.com/data/
• attr - http://api.jquery.com/attr/
• Semántica y estructura HTML, atributos de datos personalizados - source

Answer 5

Iyap. Su trabajo distingue entre mayúsculas y minúsculas en data name data-x10

var variable = $(''#myButton'').data("x10"); // obtenemos el valor del atributo de datos personalizados

Answer 6

Use métodos simples de javascript

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