javascript - 怎样把购物车飞入事件的click事件转换成一种方法
天蓬老师
天蓬老师 2017-04-11 11:32:04
0
3
376

我想要吧那个click事件变成onclick事件,就是把下面的一段js改写成一个方法
这是html<p class="box">

<img src="images/lg.jpg" width="180" height="180"> 
<h4>¥<span>3499.00</span></h4> 
<p>LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计</p> 
<a href="#" class="button orange addcar">加入购物车</a> 

</p>
<p class="box">

<img src="images/hs.jpg" width="180" height="180"> 
<h4>¥<span>3799.00</span></h4> 
<p>Hisense/海信 LED50T1A 海信电视官方旗舰店</p> 
<a href="#" class="button orange addcar">加入购物车</a> 

</p>
<p class="box">

<img src="images/cw.jpg" width="180" height="180"> 
<h4>¥<span>¥3999.00</span></h4> 
<p>Skyworth/创维 50E8EUS 8核4Kj极清酷开系统智能液晶电视</p> 
<a href="#" onclick="" class="button orange addcar">加入购物车</a> 

</p>
<p class="box">

<img src="images/ls.jpg" width="180" height="180"> 
<h4>¥<span>6969.00</span></h4> 
<p>乐视TV Letv X60S 4核1080P高清3D安卓智能超级电视</p> 
<a href="#" onclick="" class="button orange addcar">加入购物车</a> 

</p>

这是js$(function() {

var offset = $("#end").offset(); 
$(".addcar").click(function(event){ 
    var addcar = $(this); 
    var img = addcar.parent().find('img').attr('src'); 
    var flyer = $('<img class="u-flyer" src="'+img+'">'); 
    flyer.fly({ 
        start: { 
            left: event.pageX, //开始位置(必填)#fly元素会被设置成position: fixed 
            top: event.pageY //开始位置(必填) 
        }, 
        end: { 
            left: offset.left+10, //结束位置(必填) 
            top: offset.top+10, //结束位置(必填) 
            width: 0, //结束时宽度 
            height: 0 //结束时高度 
        }, 
        onEnd: function(){ //结束回调 
            $("#msg").show().animate({width: '250px'}, 200).fadeOut(1000); //提示信息 
            addcar.css("cursor","default").removeClass('orange').unbind('click'); 
            this.destory(); //移除dom 
        } 
    }); 
}); 
天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

reply all(3)
黄舟

是想要這樣嗎?

<a href="#" onclick="addCart" class="button orange addcar">加入购物车</a> 
function addCart(event) {
    event.preventDefault();
    
    var offset = $("#end").offset(); 
    var addcar = $(event.target); 
    var img = addcar.parent().find('img').attr('src'); 
    var flyer = $('<img class="u-flyer" src="'+img+'">'); 
    flyer.fly({ 
        start: { 
            left: event.pageX, //开始位置(必填)#fly元素会被设置成position: fixed 
            top: event.pageY //开始位置(必填) 
        }, 
        end: { 
            left: offset.left+10, //结束位置(必填) 
            top: offset.top+10, //结束位置(必填) 
            width: 0, //结束时宽度 
            height: 0 //结束时高度 
        }, 
        onEnd: function(){ //结束回调 
            $("#msg").show().animate({width: '250px'}, 200).fadeOut(1000); //提示信息 
            addcar.css("cursor","default").removeClass('orange').unbind('click'); 
            this.destory(); //移除dom 
        } 
    }); 
}; 
刘奇

首先将所有的页面上的

<a href="#" onclick="" class="button orange addcar">加入购物车</a> 

换成

<a href="javascript:void(0);"  onclick="addCar(this)" class="button orange addcar">加入购物车</a>

js里面添加方法

 function addCar(e){
  var offset = $("#end").offset(); 
   var addcar = $(e.parentElement); 
    var img = addcar.parent().find('img').attr('src'); 
    var flyer = $('<img class="u-flyer" src="'+img+'">'); 
    flyer.fly({ 
        start: { 
            left: event.pageX, //开始位置(必填)#fly元素会被设置成position: fixed 
            top: event.pageY //开始位置(必填) 
        }, 
        end: { 
            left: offset.left+10, //结束位置(必填) 
            top: offset.top+10, //结束位置(必填) 
            width: 0, //结束时宽度 
            height: 0 //结束时高度 
        }, 
        onEnd: function(){ //结束回调 
            $("#msg").show().animate({width: '250px'}, 200).fadeOut(1000); //提示信息 
            addcar.css("cursor","default").removeClass('orange').unbind('click'); 
            this.destory(); //移除dom 
        } 
    }); 
  }
Ty80

上面的诸位已经给予了转成方法的例子。这里我补充点个人的意见。

<a href="#" onclick="" class="button orange addcar">加入购物车</a> 

可以修改为

<a href="javascript:void(0)" class="btn button orange addcar">加入购物车</a> 

然后只要指向$('a.btn'),就可以都绑定上该事件,不需要onclick。或者特别情况下,可以改为$('a.btn').attr('href', javascript:方法)这种形式(兼容性更好)。
这样就可以保证html是纯结构型,而通过class的独特命名来指明对象。

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!