Question

我正在使用animate.css库。

我有这个Javascript函数

function animationClick(element, animation){
element = $(element);
element.click(
    function() {
        element.addClass('animated ' + animation);
        window.setTimeout( function(){
            element.removeClass('animated ' + animation);
        }, 600);         

    });

}

我有这个jQuery调用

$(document).ready(function(){
$("#startButton").click(function() {
    animationClick(this, 'pulse');
});

});

这是我的HTML

<input id="startButton" class="btn contained animated fadeInDown" type="button" id="startButton" value="Start!"></input>

我尝试了什么，我尝试将onclick=""添加到我的html按钮，并直接调用该函数，似乎没有任何效果。

我认为动画有问题，所以我尝试做一个简单的.hide而不是我的jQuery仍然没有工作

我已在线查看并确保我的网页正确相互呼叫，例如<link rel="stylesheet" href="animation.css">和<script src="play.js"></script>

我还尝试通过在本地下载并调用文件<script src="jquery-3.3.1.min.js"></script>来导入jQuery版本帮助赞赏

更新：

我检查了页面控制台，系统显示以下消息：Uncaught ReferenceError: $ is not defined at play.js:92 第92行是$(document).ready(function () { 我认为这是jQuery问题的导入，但我已经导入了它。导入不正确吗？

Answer 1

您可以尝试使用此代码。

$(document).ready(function(){
$(document).on("click","#startButton",function() {
    $(this).addClass('animated pulse');
        window.setTimeout( function(){
            $(this).removeClass('animated pulse');
     }, 600);    
});
});

无需调用可以直接在jQuery的click事件中添加和删除类的函数。

Answer 2

<script type="text/javascript" src="./jquery-3.3.1.min.js"></script>
<script type="text/javascript">

$("#startButton").on("click", function() {
   $(this).addClass('animated pulse');
        window.setTimeout( function(){
        $(this).removeClass('animated pulse');
   }, 600);    
 });

</script>

这是你的代码看起来的样子，也许是你在dom函数之后加载你的jquery。

如何使用animate.css使用jQuery调用JS函数

2 个答案: