Question

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

<div class="animsition">

现在我想使用jquery在现有的div中追加一个新属性。我喜欢animstion类会变成：

 <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()

＆＃13;

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]);
}

＆＃13;

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

＆＃13;

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

＆＃13;

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]);
})

＆＃13;

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

＆＃13;

在现有div jquery中追加新属性

2 个答案: