jQuery - 多个点击事件

Question

jQuery - 多个点击事件

3

我有一个问题。我刚开始学习jQuery，这是我第一次接触JavaScript。我想在点击时使一个元素动画效果，我确实做到了。

HTML代码：

<h1>Testing</h1>

我正在使用Animate.css在点击时进行一些动画效果。这是我的jQuery代码：

$('h1').click(function (e) { 

            $('h1').addClass('animated bounce');

        });

我想实现的是，当我第二次点击时，动画会再次发生，实际上，我想删除animated bounce类并再次添加它，这样动画就会再次发生。

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>

<body>
  
  <h1>Testing</h1>
  
  
  <script>

  
  $('h1').click(function (e) { 
          $('h1').addClass('animated bounce');
           
        });
  </script>

</body>

请告诉我，我的代码是否正确，我的意思是语法是否正确，我看到了一些包含$(this)的代码，我不确定那是什么，还有我看到了一些类似于.on('click')的东西。

谢谢。

- MareGraphics MaRe

2个回答

1

Do this:

$('h1').on("click", function() {
  $(this).addClass('animated bounce');
  setTimeout(()=> $(this).removeClass('animated bounce'), 1000);
});

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>

<body>

  <h1>Testing</h1>

</body>

你使用toggleClass方法 - 它会切换元素是否具有类，正如其名称所示。

- Jack Bashford

这将是正确的答案，但在第二次尝试后我必须双击它。 - Mojo Allmighty

1

不是我的问题，只是想给你的答案点赞 :) - Mojo Allmighty

@MojoAllmighty 是的，已经修复完成了！现在可以工作了吗？（同时不要犹豫投票） - Jack Bashford

动画完成后最好使用setTimeout。 - buhbang

现在它坏了，嗯，我是jQuery的新手，希望你们能帮我 :) - MareGraphics MaRe

哦，现在使用setTimeout可以工作了。我明白了。谢谢！ - MareGraphics MaRe

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David · Accepted Answer

一旦动画结束，您需要删除CSS类。

$('h1').click(function() {
  $(this).addClass('animated bounce').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
    $(this).removeClass();
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<h1>Testing</h1>

除此之外，你的语法没问题。

一些注释：

e 是一个基于 Event 的对象，用于描述已发生的事件。这是可选的。如果您不需要事件数据，可以跳过它。
$(this) 是一个 jQuery 对象。在回调函数的上下文中，它是调用函数的元素。在 JavaScript 中，this 关键字是一个非常重要且复杂的主题。您可以在 MDN 和这里的 SO 上阅读相关内容。
one() 是一个事件处理程序附加器，确保处理程序仅执行一次。
on() 是另一个附加器。请参阅此 SO 问题，了解何时使用 click() 或 on('click')。