WOW.js - 如何避免 data-* 属性？答案

【问题标题】：WOW.js - how to avoid data-* attributes?WOW.js - 如何避免 data-* 属性？
【发布时间】：2017-06-06 14:34:46
【问题描述】：

我正在使用WOW.js 为一些div 容器设置动画，并希望避免使用data-* 属性。

示例 HTML

 <div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">Content</div>

示例 JS

var wow = new WOW({
    boxClass:     'wow',      
    animateClass: 'animated', 
    offset:       0,          
    mobile:       true,       
    live:         true        
});

wow.init();

是否可以通过类或JS来控制数据属性 持续时间、延迟、偏移和迭代，例如在 init() 上？

我的解决方法是搜索class="wowDelay-5s" 之类的类，并为其元素添加一个属性data-wow-delay="5s"，但我更喜欢正确的方法，如果有的话。

提前致谢！

【问题讨论】：

使用 WOW.js 的正确方法是使用 data-* 属性 - 为什么它们会出现问题？
我使用的 CMS 只提供了一个字段来设置 class-attribute。我无法直接操作 HTML 元素及其属性。
啊，那么，是的，您可以按照您的建议进行操作
你需要在调用wow.init()之前“预处理”标签我建议
请告诉我，您找到解决方案了吗？

标签： javascript jquery html animation wow.js

【解决方案1】：

使用 jquery 获取数据属性有两种不同的方法。

首先，你寻找属性

var firstWay = $('.wow.slideInLeft').attr('data-wow-duration');

第二个是使用jquery的数据函数

var secondWay = $('.wow.slideInLeft').data('wow-duration');

用初始化函数设置属性也很简单

$('.wow.slideInLeft').attr('data-wow-duration') = '2s';

和

$('.wow.slideInLeft').data('wow-duration', '2s');

希望对你有帮助

【讨论】：

我认为您需要再次阅读问题-他想使用wowDuration-5s之类的类-并将其“转换”为属性data-wow-duration: 5s-因为他无法直接创建数据-*他的 CMS 中的属性