Question

我正在尝试在jQuery中设置变量。该值应该在按钮的单击事件上设置。触发onclick事件，但x10Device变量仍为undefined。

我在jquery 1.7.1。

jQuery的：

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

HTML：

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

我看不出有什么不对。

Answer 1

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 - 即data-some-data == $(ele).data('someData')）。这两个转换都符合HTML规范，该规范规定自定义数据属性不应包含大写字母，并且连字符将在dataset属性（source）中加入驼峰。 jQuery的data方法仅仅是模仿/符合这种标准行为。

<强>文档

data - http://api.jquery.com/data/
attr - http://api.jquery.com/attr/
HTML语义和结构，自定义数据属性 - http://www.w3.org/html/wg/drafts/html/master/dom.html#custom-data-attribute

Answer 2

Iyap。这是工作区分大小写的数据名称数据-X10

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

Answer 3

使用普通的javascript方法

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

Answer 4

将套管改为所有小箱都适合我。

Answer 5

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

 <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/

Answer 6

确保检查与按钮单击相关的事件是否未按照按钮内的图标标记（<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');
});

jquery无法获取数据属性值

6 个答案: