jQuery購物網站源碼是基于jQuery框架開發的一款在線購物網站,為用戶提供便捷的購物體驗。該源碼采用了最新的前端技術,如響應式設計、AJAX異步加載、jQuery插件等,使用戶可以隨時隨地輕松購物。
$(document).ready(function() { // 加載商品數據 $.ajax({ url: "data/goods.json", dataType: "json", success: function(data) { // 商品展示 $.each(data, function(index, item) { $(".goods-list").append("<div class='goods-item'><p class='name'>" + item.name + "</p><p class='price'>" + item.price + "</p><div class='btn-buy'>購買</div></div>"); }); // 加入購物車 $(".btn-buy").click(function() { var cartNum = parseInt($(".cart-num").text()); var price = parseFloat($(this).prev(".price").text()); $(".cart-num").text(cartNum + 1); $(".cart-total").text((parseFloat($(".cart-total").text()) + price).toFixed(2)); }); } }); // 購物車清空 $(".btn-clear").click(function() { $(".cart-num").text(0); $(".cart-total").text(0); }); });
以上代碼為商品展示和購物車功能的實現。當頁面加載完成后,使用AJAX異步加載data/goods.json中的商品數據,并通過$.each循環遍歷數據,動態添加到頁面中。在商品列表中,每個商品的購買按鈕都綁定了click事件,點擊購買按鈕后,購物車數量和總價都會實時更新。
上一篇css怎么找到上級
下一篇css怎么把列表居中