Question

我是jquery（和编程）的新手。

我在一个页面上有各种div，我希望从animate.css中添加不同的效果。有没有办法在一个声明中这样做。例如，像：

$(function(){

    $('.class1, .class2, .class3').addClass('effect1 animated', 'effect2 animated', 'effect3 animated');

});

或者我必须以这种方式分配它：

$(function(){

    $('.class1').addClass('effect1 animated');
    $('.class2').addClass('effect2 animated');
    $('.class3').addClass('effect3 animated');

});

提前致谢！

Answer 1

尝试接受回调的addClass（）

$(function() {
  var names = ['effect1', 'effect2', 'effect3']
  $('.class1, .class2, .class3').addClass(function(i, clazz) {
    return names[i] + ' animated'
  })
});

.effect1 {
  color: red;
}
.effect2 {
  color: green;
}
.effect3 {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="class1">1</div>
<div class="class2">2</div>
<div class="class3">3</div>

Answer 2

你可以做什么，你可以再添加一个类class1，class2 ....就像'my-class'

var elements = $(document).find('.my-class');
$.each(elements, function(index, element){
    var classAtr= $(this).attr('class');
  classes = classAtr.split(" ");
  var index = classes[1].substring(5,6);  $(this).addClass("effect" + index + " animated");
});

.effect1{
  color : red;
}
.effect2{
  color : orange;
}
.effect3{
  color : green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <li class="my-class class1">1</li>
    <li class="my-class class2">2</li>
    <li class="my-class class3">3</li>
</body>

http://jsbin.com/tepoyo/2/watch?html,css,js,output

通过单个jquery语句将不同的animate.css类添加到不同的div

2 个答案: