html5-jQuery无法获取数据属性值

我试图在jQuery中设置一个变量。 该值应该在按钮的click事件上设置。 将触发onclick事件,但x10Device变量仍为undefined

我在使用jQuery 1.7.1。

jQuery的:

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

HTML:

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

我看不出有什么问题。

Jason Millington asked 2019-10-09T03:33:52Z
6个解决方案
124 votes

jQuery的attr方法将使您可以访问dataset属性,但是,它掩盖了属性名称的大小写。 您可以使用以下方法:

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

或者,您可以使用attr方法来保留您的情况:

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

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

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

请注意,jQuery还将属性名称中的连字符转换为驼峰式大小写(来源-即attr)。 这两种转换均符合HTML规范,HTML规范要求自定义数据属性不应包含大写字母,并且在dataset属性(源)中将使用连字符大写字母连字符。 jQuery的data方法仅模仿/符合此标准行为。

文档

  • attr-[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]
Chris Baker answered 2019-10-09T03:34:52Z
3 votes

耶! 是工作数据名称区分大小写数据x10

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

Indra answered 2019-10-09T03:35:23Z
1 votes

使用普通的javascript方法

$x10Device = this.dataset("x10");
Yana Agun Siswanto answered 2019-10-09T03:35:48Z
1 votes

将外壳更改为所有小写字母对我来说很有效。

Marvin Glenn Lacuna answered 2019-10-09T03:36:13Z
1 votes

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

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

curiousBoy answered 2019-10-09T03:36:44Z
1 votes

确保检查与按钮单击相关的事件是否未传播到子元素中,例如作为按钮内部的图标标签(<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');
});
Everton Z. P. answered 2019-10-09T03:37:10Z
translate from https://stackoverflow.com:/questions/17351282/jquery-cant-get-data-attribute-value