从从.data（）创建的jQuery对象访问值

我有几个具有各种数据属性的HTML元素我尝试使用jQuery在单击某个特定元素时存储该元素的所有数据属性，然后将该对象中的一个值作为文本插入到另一个元素中。我尝试了各种方法，我认为我正确地存储了数据，但我无法找到一种直接的方法来提取特定的

数据属性

值，以便将其插入

#display

元素。HTML：

<span class="source" data-spanName="spanOne" data-spanPosition="first">Span One</span>
<span class="source" data-spanName="spanTwo" data-spanPosition="second">Span Two</span>
<span class="source" data-spanName="spanThree" data-spanPosition="third">Span Three</span>

<span id="display">display attribute here</span>

尝试2（返回未定义）：

尝试3（显示所有数据，但显示为字符串）：

预期的最终结果：

<span id="display">spanOne</span>

spanOne

试试这个：

name = $(this).attr('data-spanName');
pos = $(this).attr('data-spanPosition');

试试这个：

name = $(this).attr('data-spanName');
pos = $(this).attr('data-spanPosition');

---

数据属性的命名约定解释得很好

但你的第二次尝试似乎非常接近。但是，访问对象就像访问数组一样，因此需要尝试不同的访问方式：

$('.source').click(function () {
    var rowData = $( this ).data();

    // proper way to get the data
    var spanName = rowData.spanname;
    $('#display').text( spanName ); 

});

---

数据属性的命名约定解释得很好

但你的第二次尝试似乎非常接近。但是，访问对象就像访问数组一样，因此需要尝试不同的访问方式：

$('.source').click(function () {
    var rowData = $( this ).data();

    // proper way to get the data
    var spanName = rowData.spanname;
    $('#display').text( spanName ); 

});

---

当您显然没有存储任何类型的数组时，为什么要尝试[0]？您只需要按照文档中的建议执行rowdata。我想我的部分困惑是因为阅读了

jQuery.data（）

的文档，而不是

.data（）

为什么要尝试[0]当您显然没有存储任何类型的数组时？您只需要按照文档中的建议执行rowdata。我想我的部分困惑是因为阅读了

jQuery.data（）

的文档，而不是

.data（）

$('.source').click(function () {
    var rowData = $( this ).data();

    // proper way to get the data
    var spanName = rowData.spanname;
    $('#display').text( spanName ); 

});

$('.source').click(function(){
    var text = $(this).data('spanName');
    $('#display').text(text);
});