购物车加减

<head>

	<meta charset="UTF-8">

	<title>加减购物车</title>

	<style type="text/css">

		input {

			width: 35px;

			height: 35px;

			font-size: 20px;

			text-align: center;

		}

	</style>

	<script src="js/jquery-3.3.1.min.js"></script>

	<script>

		$(function() {

			$("input[value='-']").click(function() {

				var $txt = $(this).next("input");

				var num = parseInt($txt.val());

				if(num - 1 >= 0) {

					$txt.val(num - 1);

				}

			});

			$("input[value='+']").click(function() {

				var $txt = $(this).prev("input");

				var num = parseInt($txt.val());

				$txt.val(num + 1);

			});

		});

	</script>

</head>

<body>

	<p>

		<input type="button" value="-" />

		<input type="text" value="1" />

		<input type="button" value="+" />

	</p>

	<p>

		<input type="button" value="-" />

		<input type="text" value="1" />

		<input type="button" value="+" />

	</p>

</body>

JQuery案例：购物车加减的更多相关文章

  1. 【小程序开发】购物车加减几件demo

    <!-- 主容器 --> <view class="stepper"> <!-- 减号 --> <text class="{{m ...

  2. js实现仿购物车加减效果

    代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

  3. js jquery 权限单选 bug修改以及正确代码 购物车数量加减

    效果图废话不多直接上代码 用的avalon渲染,其实都是一样的 <div class="shop-arithmetic"> <a href="javas ...

  4. jQuery实现购物车多物品数量的加减+总价计算

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  5. Jquery实现购物车物品数量的加减特效

    今天网友翠儿在用Jquery实现购物车物品数量的加减特效的时候遇到问题来问我,我后来帮她解决了这个Jquery特效,现在把它整理出来分享给大家用,虽然功能比较简单,但是很实用. 主要包括了以下功能: ...

  6. jQuery实现购物车多物品数量的加减+总价+删除计算

    <?php session_start(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  7. jQuery实现购物车物品数量的加减

    基于jquery的一款代码,实现购物车数据的加减,在淘宝网.京东商城购物时时经常见到的一个功能,点击文本框两侧的“+”与“-”,就可以增加或减少文本框内的数字值,每次步长为1,当然这个是可以自己设置的 ...

  8. JQuery购物车多物品数量的加减+总价计算

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Vue(小案例_vue+axios仿手机app)_购物车（二模拟淘宝购物车页面，点击加减做出相应变化）

    一.前言 在上篇购物车中,如果用户刷新了当前的页面,底部导航中的数据又会恢复为原来的: 1.解决刷新,购物车上数值不变                                         ...

随机推荐

  1. net core webapi多版本控制与nswag 交互

    前言 首先希望webapi 支持多版本,swagger针对不同的版本可进行交互.netcore 基于Microsoft.AspNetCore.Mvc.Versioning.ApiExplorer 包, ...

  2. hadoop使用实例

    一.词频统计 1.下载喜欢的电子书或大量文本数据,并保存在本地文本文件中 2.编写map与reduce函数 3.本地测试map与reduce 4.将文本数据上传至HDFS上 5.用hadoop str ...

  3. 11张图和源码带你解析Spring Bean的生命周期，建议收藏~!

    在网上已经有跟多Bean的生命周期的博客,但是很多都是基于比较老的版本了,最近把整个流程画成了一个流程图.待会儿使用流程图,说明以及代码的形式来说明整个声明周期的流程.注意因为代码比较多,这里的流程图 ...

  4. 使用git处理github中提交有冲突的pull request

    前言: 为什么要写这篇文章,因为前段时间有一个开源的github中的项目有一个朋友提交了一个pr看了下是帮忙优化了下代码(十分感谢这位网友).但是他提交的pr刚好和我的项目有许多的冲突导致无法自动合并 ...

  5. 理解js参数

    <!DOCTYPE html><html><head> <meta charset="utf-8" /> <title> ...

  6. canvas基础[二]教你编写贝塞尔曲线工具

    贝塞尔曲线 bezierCurveTo 在线工具 https://canvature.appspot.com/ [感觉这个好用一些] https://blogs.sitepointstatic.com ...

  7. 在Linux深度系统deepin下安装docker

    wget -qO- https://get.docker.com/ | sh wget -qO- https://get.docker.com/ | sh

  8. 利用.NET 5和Github Action 自动执行米游社原神每日签到福利

    背景 众所周知,原神的签到福利是需要下载app才可以领取的.但像我这种一般不怎么刷论坛的人,每天点开app签到很麻烦. 很多大佬利用Github的Action自动执行的模式,实现了很多好东西.加上.n ...

  9. Netlink 内核实现分析 4

    netlink 库函数: http://www.infradead.org/~tgr/libnl/doc/core.html#core_netlink_fundamentals #define NET ...

  10. 一：JavaWeb

    1.javaWeb技术体系 2.HTMl 超文本标记语言 (超文本的意思就是除了可以包含文字之外,还可以包含图片链接音乐视频等...) 2.1 HTML网页的组成  (结构:HTML 表现:CSS 行 ...