嘿,我已经尝试制作一个自定义脚本来显示购物车。我认为我最接近完成但我有问题它只能调用该功能一次。
在http://articles-authors.com/order-form/上,您可以看到右侧顶部的购物车,以及加载网站加载功能时创建购物车。但是当试图将鼠标悬停在购物车上时,应该调用另一个函数重新创建购物车,并将类设置为html元素#cart的活动类。
以下是代码:
首先调用购物车的功能创建功能
makeCartWithoutActive();
$("#cart").mouseenter(function(){
makeCartWithActive();
}).mouseleave(function(){
makeCartWithoutActive();
});
原因是使用mouseenter是因为我使用jquery 2.0.3并且1.7中已经删除了live。
在这里您可以看到应该重新创建购物车的功能,然后将类激活设置为#cart,以便购物车显示
function makeCartWithActive(){
$.get("http://articles-authors.com/order-form/cart/get",function(data) {
var html = "";
if(data.msg === false){
html = '<div id="cart" class="right active">'+
'<div class="heading"><a><span id="cart-total">0 item(s) - $0.00</span></a></div>'+
'<div class="content"><div class="empty">'+data.respone+'</div></div></div>';
$("#cart").replaceWith(html);
}else{
html = '<div id="cart" class="right active"><div class="heading"><a><span id="cart-total">'+data.totalitem+' item(s) - $'+data.totalprice+'</span></a></div>'+
'<div class="content"><div class="mini-cart-info"><table><tbody>';
$.each(data.data, function(i, currProgram) {
$.each(currProgram, function(key,val) {
html += '<tr><td class="name">'+val.name+'</td><td class="quantity">x '+val.quantity+
'</td><td class="total">$'+val.price+'</td><td class="remove"><img src="http://articles-authors.com/order-form/img/remove-small.png'+
'" onclick="RemoveItem('+val.rowid+');" width="12" height="12" title="Remove" alt="Remove"></td></tr>';
});
});
html += '</tbody></table></div>'+
'<div class="mini-cart-total"><table><tbody><tr><td align="right"><b>Sub-Total:</b></td><td align="right">'+data.totalprice+'</td></tr><tr><td align="right"><b>Total:</b></td><td align="right">'+data.totalprice+'</td></tr></tbody></table></div>'+
'<div class="checkout"><a class="button" href="http://articles-authors.com/order-form/cart">Checkout</a></div></div></div>';
$("#cart").replaceWith(html);
}},
"jsonp");
}
希望有人可以帮助我。我还是jQuery / JavaScript的新手,所以不知道为什么会发生这种情况
提前致谢
答案 0 :(得分:2)
使用委派的事件处理程序
$(document).on('mouseenter', '#cart', function(){
makeCartWithActive();
});
$(document).on('mouseleave', '#cart', function(){
makeCartWithoutActive();
});
或者您可以使用
$(document).on({
"mouseenter" : function(e) { makeCartWithActive(); },
"mouseleave" : function(e) { makeCartWithoutActive(); }
}, "#cart");
答案 1 :(得分:0)
$(document).on('mouseenter', '#cart', function(){
makeCartWithActive
}).on('mouseleave', '#cart', function(){
makeCartWithoutActive
});
你正在替换元素,因此处理程序消失了。您需要将函数委托给最近的静态父元素。
我选择了文档,但为了提高性能,您应该选择更接近#cart