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()。我建议阅读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()更好。

唯一的一次，如果你把一个自定义属性，在HTML这样每HTML5标准定制你可以使用data-前缀自己的属性：

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

然后，你可以阅读了这一点：

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

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

Answer 2

我不喜欢这个实现，因为一方面它读取'data-xxx'属性，另一方面它不写它。只是为了方便使用缓存并能够存储对象和功能。

这被称为'编程与副作用'。这很混乱，它混合了两个不同的概念，互相干扰。我认为这是严格的“不行”。还有其他方法可以将对象链接到DOM元素 - 主要是通过使用应该覆盖大多数用例的事件处理程序。依赖于“状态”的复杂数据应作为成员放置在对象中，并应该处理剩余的用例。将对象放入事件处理程序的数据中，并获得所需的所有内容。这就是'OOP'的方法。它的工作原理是C++，C＃和Java，没有理由不能在JavaScript中工作。它的内存泄漏或不一致的数据的可能性要小得多。

所以请：不要使用这些功能。甚至不要去想它。更好地研究面向对象的模式，并从一开始就做好它！