jquery 通过 .data() 为键分配值不起作用

Question

我有一个非常简单的(人们会认为)任务。

将值传递到弹出窗口，并根据单击(继续或取消)使用传递的值执行操作。

    // on click we pass the value to the function testing - so far so good
$('#numbers').delegate('.icondelete', 'click', function(){
    testing( $(this).attr('data-options') ); 
});

我将找到的值传递给函数，然后尝试将其分配给键

function testing(id){
   //we can see that it passed successfully
    alert("here it is: " + id); 

     //push the data into key data-id
    $('#dodelete').data('data-id',id);

//but this alert doesn't return the value
alert("it should be here shouldn't it? " + $('#dodelete').attr('data-id'));
    }

html

<div id='numbers' >
<div class='icondelete'  data-options='123' >Set data-options as 123 - click here to test</div>
</div>

<br><br>
<div id='dodelete' data-id=''>landing div</div>

如果你查看 fiddle http://jsfiddle.net/Microbe/cRLfC/4/ ，您可以看到该值没有问题地传递到函数中，但是当我尝试将其分配给键时却没有。

我哪里出错了？

Answer 1

使用.data()时，请勿添加data-前缀。读回值时，请使用 .data("key")，而不是 .attr()。我建议阅读this并查看代码示例。

所以你的代码应该是这样的:

function testing(id) {
   //we can see that it passed successfully
    alert("here it is: " + id); 

     //push the data into key myid
    $('#dodelete').data('myid', id);

    //but this alert doesn't return the value
    alert("it should be here shouldn't it? " + $('#dodelete').data('myid'));
}

通过.data()设置值实际上并没有使用该值在对象上设置属性/属性。数据实际上存储在 jQuery 数据结构内，并且不是使用 .attr("key") 检索它，而是使用 .data("key") 检索。

如果你想设置一个实际的属性，可以使用 .attr("key", value) 来实现，不过在 jQuery 编码中，通常最好使用 .data() 比自定义属性。

您自己使用 data- 前缀的唯一情况是，如果您按照自定义属性的 HTML5 标准将自定义属性放入 HTML 中，如下所示:

<div id="myObject" data-numloops="20"></div>

然后，您可以这样阅读:

var loopCnt = $("#myObject").data("numloops");

当查询数据值时，jQuery会首先在自己的内部存储中查找。如果在那里找不到，它将查找与名称匹配的 HTML5 数据属性。