63

I am trying to set a variable in jQuery. The value is supposed to be set on the click event of the button. The onclick event fires but the x10Device variable remains undefined.

I am on jquery 1.7.1.

jQuery:

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

HTML:

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

I can't see what's wrong.

4

6 回答 6

131

jQuery 的data()方法可以让您访问data-*属性，但是，它破坏了属性名称的大小写。你可以使用这个：

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

或者，您可以使用attr()保留您的案例的方法：

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

在这里尝试两种方法：http: //jsfiddle.net/q5rbL/

请注意，这些方法并不完全等效。如果要更改元素的data-*属性，则应使用attr(). data()最初会读取一次值，然后继续返回缓存副本，而attr()每次都会重新读取属性。

请注意，jQuery 还会将属性名称中的连字符转换为驼峰式大小写（source -- ie data-some-data == $(ele).data('someData')）。这两种转换都符合 HTML 规范，该规范规定自定义数据属性不应包含大写字母，并且连字符将在dataset属性 ( source ) 中使用驼峰式大小写。jQuery 的data方法只是模仿/符合这个标准行为。

文档

于 2013-06-27T19:12:52.757 回答
3

雅普。它的工作在数据名称 data-x10 中区分大小写

var variable = $('#myButton').data("x10");// 我们获取自定义数据属性的值

于 2016-02-12T09:15:10.390 回答
2

确保检查与按钮单击相关的事件是否没有作为按钮内的图标标记 ( ) 传播到子元素，<i class="fa...因此这种传播可能会让您错过按钮并点击图标标记。$(this).attr('data-X10')

<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');
});
于 2017-08-21T03:22:30.867 回答
1

使用普通的 javascript 方法

$x10Device = this.dataset("x10");
于 2015-06-18T08:05:40.763 回答
1

您可以根据需要更改选择器和数据属性！ 

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

这是工作示例：https ://jsfiddle.net/ed5axgvk/1/

于 2016-08-20T07:19:24.723 回答
1

将大小写更改为所有小写字母对我有用。

于 2016-07-21T09:59:05.447 回答