我有这个代码来实现一个小电子商务:
$(document).ready(function(){
$("#basketItemsWrap li:first").hide();
$(".productPriceWrapRight a img").click(function() {
var productIDValSplitter = (this.id).split("_");
var productIDVal = productIDValSplitter[1];
var productX = $("#productImageWrapID_" + productIDVal).offset().left;
var productY = $("#productImageWrapID_" + productIDVal).offset().top;
if( $("#productID_" + productIDVal).length > 0){
var basketX = $("#productID_" + productIDVal).offset().left;
var basketY = $("#productID_" + productIDVal).offset().top;
} else {
var basketX = $("#basketTitleWrap").offset().left;
var basketY = $("#basketTitleWrap").offset().top;
}
var gotoX = basketX - productX;
var gotoY = basketY - productY;
var newImageWidth = $("#productImageWrapID_" + productIDVal).width() / 3;
var newImageHeight = $("#productImageWrapID_" + productIDVal).height() / 3;
$("#productImageWrapID_" + productIDVal + " img")
.clone()
.prependTo("#productImageWrapID_" + productIDVal)
.css({'position' : 'absolute'})
.animate({opacity: 0.4}, 100 )
.animate({opacity: 0.1, marginLeft: gotoX, marginTop: gotoY, width: newImageWidth, height: newImageHeight}, 1200, function() {
$(this).remove();
$("#notificationsLoader").html('<img src="images/loader.gif">');
$.ajax({
type: "POST",
url: "funzioni-carrello.asp",
data: { productID: productIDVal, action: "addToBasket"},
success: function(theResponse) {
$("#empty").hide();
if( $("#productID_" + productIDVal).length > 0){
$("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
$("#productID_" + productIDVal).before(theResponse).remove();
$("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
$("#productID_" + productIDVal).animate({ opacity: 1 }, 500);
$("#notificationsLoader").empty();
} else {
$("#basketItemsWrap li:first").before(theResponse);
$("#basketItemsWrap li:first").hide();
$("#basketItemsWrap li:first").show("slow");
$("#notificationsLoader").empty();
}
}
});
});
});
$("#basketItemsWrap li img").live("click", function(event) {
if ($("#basketItemsWrap li").length == 1){
$("#empty").show();
}
var productIDValSplitter = (this.id).split("_");
var productIDVal = productIDValSplitter[1];
$("#notificationsLoader").html('<img src="images/loader.gif">');
$.ajax({
type: "POST",
url: "funzioni-carrello.asp",
data: { productID: productIDVal, action: "deleteFromBasket"},
success: function(theResponse) {
$("#productID_" + productIDVal).hide("slow", function() {$(this).remove();});
$("#notificationsLoader").empty();
}
});
});
});
然后我就像这样调用函数:
<div id="basketWrap">
<div id="basketTitleWrap">
<h2>Carrello </h2>
</div>
<div id="empty">Your basket is empty!</div>
<div id="basketItemsWrap">
<ul>
<li></li>
<%
'dim getBasket
getBasket() %>
</ul>
</div>
</div>
我想插入图片“checkout”来链接另一个页面,当至少有一个项目时。这可能吗?
答案 0 :(得分:0)
// JQuery
if ($("#basketItemsWrap li").length > 0){
// Reference to a hidden checkout link
$("#checkout").show();
}
else{
$("#checkout").hide();
}
<!-- HTML -->
<a id="checkout" href="/my/checkout/page">
<img alt="Checkout" src="/my/checkout/image" />
</a>
/* CSS */
#checkout{
visible: none;
}
每次用户添加新项目时,您都会检查购物篮中的元素数量(li
元素)