在现有div jquery中追加新属性

Question

我在html中有一个类，如下所示：

<div class="animsition">

现在，我想使用jquery在现有的div中添加一个新属性。我喜欢的动画类将变成：

 <div class="animsition" data-animsition-in-class="fade-in-left"
  data-animsition-in-duration="1000" data-animsition-out-class="fade-out-left"
  data-animsition-out-duration="800">

我试过了，但没有工作：$(".animsition").attr("data-animsition-in-class","fade-in-left");

我将如何实现这一点？任何帮助都将不胜感激。

Answer 1

只需小心在document.ready()中添加了属性

$(document).ready(function() {
   $(".animsition").attr("data-animsition-in-class","fade-in-left");
});

Answer 2

您可以将所有这些属性放在一个对象中，并使用for...in循环和attr()

​

var attr = {
  'data-animsition-in-class': "fade-in-left",
  'data-animsition-in-duration': "1000",
  'data-animsition-out-class': "fade-out-left",
  'data-animsition-out-duration': "800"
}

for (var a in attr) {
  $('.animsition').attr(a, attr[a]);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animsition">Lorem</div>

​

或者，您可以使用Object.keys()

​

var attr = {
  'data-animsition-in-class': "fade-in-left",
  'data-animsition-in-duration': "1000",
  'data-animsition-out-class': "fade-out-left",
  'data-animsition-out-duration': "800"
}

Object.keys(attr).forEach(function(a) {
  $('.animsition').attr(a, attr[a]);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animsition">Lorem</div>

​