Javascript 动态添加和删除数据属性的问题

我正在构建一个视差页面，在调整浏览器大小时遇到了一个问题。我使用数据属性控制动画，如下所示：

<div class="element" data-0="transform:translateY(0px)" data-1283="transform:translateY(-1283 px)"></div>

$element.attr('data-0', 'transform:translateY(0px)').attr('data-' + windowHeight, 'transform:translateY(-' + windowHeight + ' px)');

我遇到的问题是，当窗口调整大小时，我的动画量也需要更改。我正在窗口调整上运行一个函数，以查找和删除任何数据属性：

$('.element').each( function() {
  var $element = $(this);
  $.each( $element.data(), function( key ) {
    $element.removeAttr( 'data-' + key );
  });
});

---

然后调用添加数据属性的函数。我还构建了一个setTimeout函数，因此它只在调整窗口大小后调用此函数。这在我第一次调整窗口大小时效果很好，但在这之后的任何时候，jquery都找不到任何具有数据属性的元素。是否有任何原因可以让它在第一次找到它们，但在之后的任何时候都找不到它们？

它不起作用的原因是因为您添加的数据属性不正确

$element.attr('data-0', 'transform:translateY(0px)')

相反，请执行以下操作

$element.data('0', 'transform:translateY(0px)')

---

jQuery没有意识到您在第一个方法中添加了一个“data”属性——它只知道您添加了一个“an”属性。当jQuery第一次解析DOM时，它将所有

数据-*

属性识别为

数据

，并保持对它们的引用，这就是为什么代码第一次工作的原因。

使用

removeData（）

，而不是

removeAttr（）

我需要数据属性是html5。这就是为什么我使用.attr（）@user2339729，这没有任何意义。如果不想使用

.data（）

，请不要使用它。如果您要使用它，那么就使用关联的方法来获取和设置它。如果我使用.data（），它不只是在jquery中存储数据信息，而不是在html元素中内联存储实际的数据属性吗？@user2339729这有什么区别？是否有第三方脚本解析您的DOM以获取更新的

数据-*

属性？如果不是，那么存储/检索与元素相关的数据的方式就没有什么区别了。是的，我用于动画的插件检查的是html5数据属性，而不是存储的jquery数据。