用jquery 实现购物车里面的商品添加或者减少的功能

HTML<div class="gw_num">
<em class="jian">-</em>
<input type="text" value="1" class="num"/>
<em class="add">+</em>
</div>

css

.gw_num{border: 1px solid #dbdbdb;width: 110px;line-height: 26px;overflow: hidden;}
.gw_num em{display: block;height: 26px;width: 26px;float: left;color: #7A7979;border-right: 1px solid #dbdbdb;text-align: center;cursor: pointer;}
.gw_num .num{display: block;float: left;text-align: center;width: 52px;font-style: normal;font-size: 14px;line-height: 24px;border: 0;}
.gw_num em.add{float: right;border-right: 0;border-left: 1px solid #dbdbdb;}

jQuery

$(document).ready(function(){
//加的效果
$(".add").click(function(){
var n=$(this).prev().val();
var num=parseInt(n)+1;
if(num==0){ return;}
$(this).prev().val(num);
});
//减的效果
$(".jian").click(function(){
var n=$(this).next().val();
var num=parseInt(n)-1;
if(num==0){ return}
$(this).next().val(num);
});
})
时间: 2024-08-30 03:47:44

用jquery 实现购物车里面的商品添加或者减少的功能的相关文章

jQuery制作淘宝商城商品列表多条件查询功能

一.介绍 这几天做网站的时候,突然用到这个功能,找了好久也没有找到.看到"希伟素材网"有这么一个JS,效果很不错,也正是我一直以来想要的结果.附图如下: 二:使用教程      1.HTML代码: <ul class="select"> <li class="select-list"> <dl id="select1"> <dt>上装:</dt> <dd cla

jQuery 复制节点的元素实现添加到购物车功能

描述: 用户点击左边div中的商品,对应商品会自动添加到右面的div中,类似电子商城中的添加到购物车功能. 主要用到了jquery中的复制节点功能,基本原理是首先获取点击的元素,然后将相应信息进行克隆,然后添加到右面的div中. 效果如果: show you code: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery test</tit

把商品添加到购物车的动画效果(贝塞尔曲线)

如图: 参考: Android补间动画,属性动画实现购物车添加动画 思路: 确定动画的起终点 在起终点之间使用二次贝塞尔曲线填充起终点之间的点的轨迹 设置属性动画,ValueAnimator插值器,获取中间点的坐标 将执行动画的控件的x.y坐标设为上面得到的中间点坐标 开启属性动画 当动画结束时的操作 难点: PathMeasure的使用 - getLength() - boolean getPosTan(float distance, float[] pos, float[] tan) 的理解

vue登录功能和将商品添加至购物车实现

 2.1: 学子商城--用户登录 用户登录商城用户操作行为,操作用户输入用户名和密码 点击登录按钮,一种情况登录成功 一种情况登录失败 "用户名或密码有误请检查" 2.2:如何实现用户登录 (1)数据库 xz_login 用户登录表[id;uname;upwd] id INT uname VARCHAR(25) upwd  VARCHAR(32) 加密处理 xz_login 1  tom     123 2  jerry     123 知识扩展:加密通过复杂算法将明文加密转换密文保存

jQuery实现购物车计算价格功能的方法

本文实例讲述了jQuery实现购物车计算价格功能的简易方法,做的比较简单,现分享给大家供大家参考.具体如下: 目的: 1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//

ecshop二次开发 购物时为每件商品添加备注信息的修改方法

目标: 用户在选购商品加入购物车前可以为商品添加备注信息 加入购物车后可以在购物车查看备注信息 店主在查看订单时可以看到用户为商品添加的备注信息 用户在个人中心中可以看到商品的备注信息 目标一: 打开ecshop/goods.php,搜索"display"可以看到这句: $smarty->display('goods.dwt', $cache_id); 打开模板目录下的goods.dwt,搜索"<!-- {* 结束循环可选属性 *} -->",在这

jQuery/CSS3类似阿里巴巴的商品导航菜单实现教程

有两天没发表文章了,今天来说说利用jQuery和CSS3制作一款类似阿里巴巴左侧商品菜单导航,这款菜单看起来非常大气,可以展示非常多的产品类目,如果你在设计电子商务网站,不妨可以拿来参考,一下是效果图: 我们也可以到这里来查看这款菜单的DEMO演示. 接下来还是分析一下源代码,源码由HTML.CSS和jQuery组成,先来看看HTML,东西很多,但结构非常简单: <div class="sidebar"> <div class="sidebar_top si

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

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="textml; charset=utf-8"> 5 <meta name="viewport" content="width=device-width"> 6 <meta name="viewpo

PHP.TP框架下商品项目的优化4-优化商品添加表单js

优化商品添加表单js 思路 1.制作五个按钮 2.下面五个table 3.全部隐藏,点击则显示 4.点击第几个按钮就显示第几个table 具体操作 1.添加按钮 2.添加五个table并添加class隐藏后面四个 style="display:none" ->隐藏 class="tab_table" ->样式名,方便js操作 3.添加JS代码绑定点击事件[add.html的最下面] /******切换代码******/ $("#tabbar-d