编程论坛 → jQuery论坛

请问一下JQ如何给一个元素根据情况绑定多个点击事件？

ID不见了发布于 2017-01-26 11:26， 5557 次点击

写了一个div，想让div第一次点击的时候向右边移动，第二次点击的时候向下移动，第三次向左移动，第四次向上移动，也就是矩形的路线，可是我的代码只能实现一轮点击，也就是执行完一个矩形的点击事件之后再点击就没反应了，求帮忙。。我想让它能循环点击事件
代码如下：

程序代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>动画</title>
    <style>
    * {padding:0;margin:0;}
    #main {width:100px;height:100px;cursor:pointer;background-color:skyblue;position:relative;}
    </style>
    <script type='text/javascript' src='./jQuery/jquery-3.1.1.js'></script>
    <script>
    $(function(){
        $('#main').unbind('click').click(function(){
                $(this).animate({'left':'800px'},3000);   //向右
                $('#main').unbind('click').click(function(){
                    $(this).animate({'top':'500px'},3000);  //向下
                    $('#main').unbind('click').click(function(){
                        $(this).animate({'left':'0px'},3000);  //向左
                        $('#main').unbind('click').click(function(){
                            $(this).animate({'top':'0px'},3000);  //向上
                            })
                        })
                    })
                })

            });
    </script>
</head>
<body>
    <div id='main'></div>
</body>
</html>

5 回复

#2

ID不见了2017-01-26 12:13

顶顶

#3

ID不见了2017-01-27 15:22

椤

#4

徐云飞2017-06-08 14:34

顶

#5

林月儿2017-06-08 21:00

程序代码：

  <script>
    $(function(){
        $('#main').click(function(){
            //setInterval(function(){
                $('#main').animate({'left':'800px'}, 1000);
                $('#main').animate({'top':'500px'}, 1000);
                $('#main').animate({'left':'0px'}, 1000);
                $('#main').animate({'top':'0px'}, 1000);
           // },200);
        });
    });
    </script>

[此贴子已经被作者于2017-6-8 21:01编辑过]

#6

jsoft20222022-01-20 15:12

这样

程序代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>动画</title>
    <style>
    * {padding:0;margin:0;}
    #main {width:100px;height:100px;cursor:pointer;background-color:skyblue;position:relative;}
    </style>
    <script type='text/javascript' src='./jQuery/jquery-3.1.1.js'></script>
    <script>
var counts=0;
    $(function(){
        $('#main').unbind('click').click(function(){
                if(counts==0){$('#main').animate({'left':'800px'}, 1000)}
                if(counts==1){$('#main').animate({'top':'500px'}, 1000)}
                if(counts==2){$('#main').animate({'left':'0px'}, 1000)}
                if(counts==3){$('#main').animate({'top':'0px'}, 1000)}
                counts++;
                 })

            });
    </script>
</head>
<body>
    <div id='main'></div>
</body>
</html>

1