使用jQuery实现简单的购物车功能

倾城の恋

已于 2022-05-11 20:37:33 修改

阅读量2k

点赞数 1

分类专栏：前端学习文章标签： javascript jquery 前端

于 2022-05-11 20:36:36 首次发布

本文链接：https://blog.csdn.net/weixin_45730094/article/details/124718239

版权

本文将介绍如何利用jQuery在前端实现一个基本的购物车功能，包括商品的添加、删除和数量增减等操作，帮助读者理解jQuery在交互式应用中的应用。

摘要由CSDN通过智能技术生成

使用jQuery实现简单的购物车功能

在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <title>购物车</title>
    <meta charset="utf-8" />
	<!-- 引入jquery文件 -->
	<script src="js/jquery.min.js"></script>
	
    <style type="text/css">
      h1 {
   
        text-align:center;
      }
      table {
   
        margin:0 auto;
        width:60%;
        border:2px solid #aaa;
        border-collapse:collapse;
      }
      table th, table td {
   
        border:2px solid #aaa;
        padding:5px;
      }
    </style>
    <script type="text/javascript">
		
		//页面加载后执行
		$(function(){
   
			
			//为添加购物车按钮注册点击事件
			$("input[type='button'][value='加入购物车']").click(function(){
   
				
				var productName = $(this).parent().siblings("td:first").text();
				var price = $(this).parent().siblings("td:eq(1)").text();
				
				//判断库存
				var stockTd = $(this).parent().siblings("td:eq(3)");
				var stock = stockTd.text();
				if (stock == 0) {
   
					alert("已售完..")
					return;
				} else {
   
					stockTd.text(parseInt(stock)-1);
				}
				//判断是否重复添加
				var flag = false; // 不重复
				$(".productName").each(function(){
   
					var name = $(this).text();
					
					if (name == productName) {
    //重复了
						//修改数量
						var input = $(this).siblings("td:eq(1)").find("input:eq(1)");