jquery简单的小项目(我的农场)&jquery单击事件&事件一次点击多次触发解决方法

写项目的时候会遇到各种问题,写这个项目我就遇到一次点击多次触发多次单击事件的问题,这种问题是因为你多次为这个控件(元素/标签)添加相同的事件,做事要有始有终,代码也是这样,当你为一控件多次添加一个事件时,他并不是把上一个事件替换了,而是在上一个事件的基础上叠加了,所以在为控件多次添加事件时要删除已有的事件

 $('#bg').off()

我的农场 ⬇

代码展示

在这里插入图片描述

css代码

<style>
    *{
        margin: 0;
    }
   .iBg{
       /*背景*/
       width:100%;
       height: 780px;
       position:absolute;
       top:0px;
       left:0px;
       background: url("images/tu0.png");
   }
    img{
          /*控制图片*/
          position:absolute;
          top:85px;
          left:195px;
      }
    #seed{
        /*控制播种按钮*/
        background-image:url(images/btn_seed.png);
        width:56px;
        height:56px;
        position:absolute;
        top:695px;
        left:250px;
        cursor:hand;
    }
    #grow{
        /*控制生长按钮*/
        background-image:url(images/btn_grow.png);
        width:56px;
        height:56px;
        position:absolute;
        top:695px;
        left:350px;
        cursor:hand;
    }
    #bloom{
        /*控制开花按钮*/
        background-image:url(images/btn_bloom.png);
        width:56px;
        height:56px;
        position:absolute;
        top:695px;
        left:450px;
        cursor:hand;
    }
    #fruit{
        /*控制结果按钮*/
        background-image:url(images/btn_fruit.png);
        width:56px;
        height:56px;
        position:absolute;
        top:695px;
        left:550px;
        cursor:hand;
    }
    .border{
        /*当点击操作按钮时*/
        border: 5px solid coral;
        border-radius: 30px;
    }

</style>

jquery代码

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    var img ;
    $(document).ready(function(){

        $('#bg').on('click',function () {
            console.log('Y:'+event.clientY+'X:'+event.clientX);
        })
        function f(){//根据点击内容显示不同的图片
            $('#bg').off();//删除上次为$('#bg')设置的点击事件
            $("#bg").on("click",function(e){
                if(e.clientX>84&&e.clientX<1469&&e.clientY>262&&e.clientY<724){//设置点击事件范围
                    $("<img src='images/"+img+"'/>").prependTo("#bg").css("top",e.clientY-60).css("left",e.clientX-50).on('click',function () {
                        $(this).remove();
                    });
                }else{
                    $('#bg').off();//删除
                }
            });
        }
        $("#seed").on("click",function(){   //绑定结果按钮的单击事件
            $('span').removeClass('border');//将所有span上的边框样式删掉
            $(this).addClass('border');//给点击的span加样式
            img = "seed.png";
            f();
        });
        $("#grow").on("click",function(){			//绑定生长按钮的单击事件
            $('span').removeClass('border');
            $(this).addClass('border');
            img = "grow.png";
            f();
        });
        $("#bloom").on("click",function(){		//绑定开花按钮的单击事件
            $('span').removeClass('border');
            $(this).addClass('border');
            img = "bloom.png";
            f();
        });
        $("#fruit").on("click",function(){			//绑定结果按钮的单击事件
            $('span').removeClass('border');
            $(this).addClass('border');
            img = "fruit.png";
            f();
        });
    });
</script>

HTML代码

<body>
<div id="bg" class="iBg" ></div>
<span id="seed"></span>
<span id="grow"></span>
<span id="bloom"></span>
<span id="fruit"></span>
</body>
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值