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>

如果您查看小提琴http://jsfiddle.net/Microbe/cRLfC/4/,您可以看到该值传递给函数no probs,但是当我尝试将其分配给键时它不会.

我哪里错了？

Answer 1

使用时.data(),请勿添加data-前缀.当读回一个值时,请使用.data("key"),而不是.attr().我建议阅读本文并查看代码示例.

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

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'));
}

设置值via .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数据属性.