Question

我在jQuery中遇到了.data（）函数的问题。

我的情景。

我使用atWho（at.js）
我订阅了此跨度的点击事件。
点击后，我会做一些与元素本身无关的事情。
当我做了我想做的事情。我使用.data（）
我现在重复上述步骤。但是，在data-attribute中插入的Object现在不仅插入到新元素中。但也是我之前创造的元素。

这两个元素都有唯一的ID。我还没有能够创建一个jsfiddle。

如果我没有从所有可能的角度看待它，我不会问这个问题。

我检查了点击后jquery是否返回了多个元素：不是这样的。我检查了数据是否被附加到两个元素：这是这种情况。我检查了自己的代码是否有问题：不是这样。

Jquery声明如下：“存储与匹配元素关联的任意数据，或者在匹配元素集合中的第一个元素的指定数据存储中返回值。”。

显然这不是它的作用。

以下是我在上面提到的高度简化的版本。

$('.item').click(function() {
  var dataIwantToAddToDomElement = doSomeStuffRelatedToTheClickedElement(this);
  $(this).data(dataIwantToAddToDomElement);

})

function doSomeStuffRelatedToTheClickedElement(element) {

  if ($(element).data('nameOfTheStuffIwantToUse')) {
    var stuff = $(element).data('nameOfTheStuffIwantToUse');
    //do stuff on var
  }

  return stuff;
}

Answer 1

由于我们没有看到实际的代码，我只是在这里放置了我在评论中所说的内容。假设您有一些HTML元素，您希望在click事件中访问它。

<div id="some_div" data-attribute="some content is here"></div>

您可以通过多种方式在点击时访问此div及其数据属性：

jQuery(document).ready(function($){
    $('#some_div').on('click', function(){
        var div_data = $(this).data('attribute');
    });
});

这将为您提供data-attribute的{{1}}内容。缺点＆＃39;此方法的一个原因是您正在访问静态对象。它本身并不是一个缺点。如果要将事件绑定到特定元素，它是一种有效的方法。

但是如果你要动态添加元素，那么你想要使用：

#some_div

您正在委派文档对象子项上的事件。 This post建议使用页面加载中存在的最近父级来定位（如果可能）..

现在令你担心的部分是使用

jQuery(document).ready(function($){
    $(document).on('click', '#some_div', function(){
        var div_data = $(this).data('attribute');
    });
});

可能在DOM中显示＃another_div`的jQuery(document).ready(function($){ $(document).on('click', '#some_div', function(){ var div_data = $(this).data('attribute'); $('#other_div').data('new_attribute', div_data); }); });发生了变化，但当您尝试使用相同的方法获取它时，您获得了原来在其中的数据。但它在检查员中发生了变化！

这是因为正如Rory McCrossan指出的那样，数据保存在jQuery内部缓存中，而不是DOM中。因此，您只是首先获取data-new_attribute中的数据属性。

您需要使用的是好的.attr()。所以你将使用的是

#another_div

如果您在点击后尝试在控制台中输出jQuery(document).ready(function($){ $(document).on('click', '#some_div', function(){ var div_data = $(this).data('attribute'); $('#other_div').attr('data-new_attribute', div_data); }); });，则会看到更新后的值。

希望这有帮助。

jQuery .data（）替换多个元素中的数据

1 个答案: