Question

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

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

这将执行一个动画，将元素向上移动1283px并完成1283px的滚动。我正在用这样的jquery添加代码：

$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都没有找到任何具有数据属性的元素。是否有任何理由为什么它会在第一次发现它们而不是在那之后的任何时间？

Answer 1

它不起作用的原因是因为您正在错误地添加数据属性。

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

相反，请执行以下操作。

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

jQuery没有实现您使用第一种方法添加了“data”属性 - 它只知道您添加了“an”属性。当jQuery首先解析你的DOM时，它会将所有data-*属性识别为data并保持对它们的引用，从而为什么你的代码第一次工作。

动态添加和删除数据属性的麻烦

1 个答案: