我可以简化这个jquery代码吗？

Question

我有与类"serv-foto“相同的div和与其相关的类”动画“，我想用"mouseover”事件在div上动画(类“脉冲”)。为了防止重复，我可以用event.target或其他任何方法简化这段代码吗？

 $(".serv-foto-1").on("mouseover", function(event) {
 $(".animated-1").addClass('pulse').one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd", function(){
    $(".animated-1").removeClass('pulse');
  });
});

$(".serv-foto-2").on("mouseover", function(event) {
 $(".animated-2").addClass('pulse').one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd", function(){
    $(".animated-2").removeClass('pulse');
  });
});

$(".serv-foto-3").on("mouseover", function(event) {
 $(".animated-3").addClass('pulse').one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd", function(){
    $(".animated-3").removeClass('pulse');
  });
});

Answer 1

删除愚蠢的整数后缀，以保留“serv”和“动画”。

然后..。

$(".serv-foto").on("mouseover", function(event) {
    $(this).find(".animated").addClass('pulse').one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd", function(){
        $(this).removeClass('pulse');
    });
});

如果需要单独选择/样式元素，则使用ids。

Answer 2

尝试如下：

$(".serv-foto-1, .serv-foto-2, .serv-foto-3").on("mouseover", function(event) {
 $(".animated-1, .animated-2, .animated-3").addClass('pulse').one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd", function(){
    $(".animated-1, .animated-2, .animated-3").removeClass('pulse');
  });
});

Answer 3

一种方法可以是简化类挂钩：

$(".serv-foto").on("mouseover", function(event) {
   $(".animated").addClass('pulse').one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd", function(){
     $(".animated").removeClass('pulse');
   });
});

您的标记仍然可以使用原始编号类：

<div class="serv-foto serve-foto-1">
  <div class="animated animated-1">
    ...
  </div>
</div>

如果您需要将唯一的挂钩与添加到选择器中的pluse类保持一致，但实际上不需要跟踪JavaScript中的所有不同类，因为它们都只是在它们上切换脉冲类。