Question

我正在尝试获取元素的数据属性但不知何故它说未定义。这是我的HTML代码

 <div id="imageContainer">
    <img data-fullimageid="1" data-title="Cool Stuff" class="backgroundImages" src="images/galvanize/1.jpg" />
    <img data-fullimageid="2" data-title="Awesome" class="backgroundImages" src="images/galvanize/1336/dj.jpg" />
    <img data-fullimageid="3" data-title="Elite" class="backgroundImages" src="images/galvanize/3.jpg" />
</div>

使用Jquery提醒它

    var firstImageTite = $('.backgroundImages:first-child').data("data-title");
alert(firstImageTite);

它说Undefined。请告诉我我错在哪里，谢谢。

Answer 1

只做

$('.backgroundImages:first-child').data("title");

而不是

$('.backgroundImages:first-child').data("data-title");

jquery .data将数据*的值缓存到密钥中，其名称显示在data-之后。因此，在使用jquery数据api的setter和getter时，您只需要提及属性名称（不带前缀）。

另请注意，您使用.data所做的任何更改都不会更改实际的属性值，因此一旦使用.data api进行修改，也会使用.data api检索

Answer 2

<强>替换

.data("data-title");

<强>与

.data("title");

或

.attr("data-title");

Answer 3

输入标题而不是数据标题。

$(function(){
$('#titledata').text($('.backgroundImages:first-child').data('title'));
});

正在运行示例

http://jsfiddle.net/rajeshmepco/ud6Ww/1/

使用jquery显示未定义元素的数据属性

3 个答案: