问题描述
- html菜鸟,请教大加如何实现这个功能
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>酒店购物</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" /> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css" /> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script> <style type="text/css"> * { font-size: 18px; } .shangping { font-size: 18px; font-weight: bold; } .jine { font-size: 24px; font-weight: bold; color: #FF9900; text-align: right; } .ui-block-c { text-align: right } .num { border: 1px solid #d6d6d6; vertical-align: middle; padding-left: 5px; padding-right: 5px; margin: 0px; text-align: center; margin: 0px -6px 0px -6px; } .image_input { width: 36px; } </style> <script type="text/javascript"> $(document).ready(function() { //数量递减 $("#type0").click(function() { var oldRoomsCount = parseInt($("#num_1").val()); if (oldRoomsCount == 1) { return; } oldRoomsCount--; $("#num_1").text(oldRoomsCount); /* refreshTotalAmount(); */ }); //数量递增 $("#type1").click(function() { var oldRoomsCount = parseInt($("#num_1").val()); oldRoomsCount++; $("#num_1").text(oldRoomsCount); /* refreshTotalAmount(); */ }); }); </script> </head> <body> <div data-role="page" id="pageone"> <div data-role="content" style="margin: 3% 2%; padding: 0px;"> <div class="ui-grid-b"> <div class="ui-block-a" style="width: 30%;"> <img src="image/3.png" style="width: 80px; height: 80px;" /> </div> <div class="ui-block-b" style="width: 40%;"> <div> <strong>精品软白沙</strong> </div> <div style="background-image: url(image/1.gif); width: 7%; color: #FF0000; font-size: 8px; text-align: center"> 特价 </div> <div style="color: #FF6600; font-size: 18px; font-weight: bold; margin-top: 15px;">¥12/包</div> </div> <div class="ui-block-c" style="width: 30%;"> <div style="margin-top: 20px; border: 1px solid red;"> <input type="image" src="redu.png" class="image_input type0" id="1" /> <span id="num_1" style="text-align: center; border: 1px solid #999; vertical-align: :50%; line-height: 20px; height: 20px;">0</span> <input type="image" src="add.png" class="image_input type1" id="1" /> </div> </div> </div> <div class="ui-grid-b"> <div class="ui-block-a" style="width: 30%;"> <img src="image/3.png" style="width: 80px; height: 80px;" /> </div> <div class="ui-block-b" style="width: 40%;"> <div> <strong>精品软白沙</strong> </div> <div style="background-image: url(image/1.gif); width: 7%; color: #FF0000; font-size: 8px; text-align: center"> 新品 </div> <div style="color: #FF6600; font-size: 18px; font-weight: bold; margin-top: 15px;">¥12/包</div> </div> <div class="ui-block-c" style="width: 30%;"> <div style="margin-top: 20px; border: 1px solid red;"> <input type="image" src="redu.png" class="image_input type0" id="2" /> <span id="num_1" style="text-align: center; border: 1px solid #999; vertical-align: 50%; line-height: 20px; height: 20px;">0</span> <input type="image" src="add.png" class="image_input type1" id="2" /> </div> </div> </div> <div class="ui-grid-b"> <div class="ui-block-a" style="width:30%"> <img src="image/3.png" style="width:80px;height:80px"/> </div> <div class="ui-block-b" style="width:40%"> <div><strong>精品软白沙</strong> </div> <div style="background-image:url(image/1.gif);width:7%; color:#FF0000; font-size:8px; tell-align: center"> 热卖 </div> <div style="color:#FF6600; font-size:18px; font-weight:bold;magin-top:15px;">¥12/包</div> </div> <div class="ui-block-c" style="width:30%"> <div style="margin-top:20px; border:1px solid red;"> <input type="image" src="redu.png" class="image_input type0" id="3"/> <span id="num_1" style="text-align:center; bord:1px solid #999; vertical-align:50%; line-height:20px; heirht:20px;"/>0 <input type="image" src="add.png" class="image_input type1"id="3"/> </div> </div> </div> <div class="ui-grid-b"> <div class="ui-block-a" style="width:30%"> <img src="image/3.png" style="width:80px;height:80px"/> </div> <div class="ui-block-b" style="width:40%"> <div><strong>精品软白沙</strong> </div> <div style="background-image:url(image/1.gif);width:7%; color:#FF0000; font-size:8px; tell-align: center"> 推荐 </div> <div style="color:#FF6600; font-size:18px; font-weight:bold;magin-top:15px;">¥12/包</div> </div> <div class="ui-block-c" style="width:30%"> <div style="margin-top:20px; border:1px solid red;"> <input type="image" src="redu.png" class="image_input type0" id="4"/> <span id="num_1" style="text-align:center; bord:1px solid #999; vertical-align:50%; line-height:20px; heirht:20px;"/>0 <input type="image" src="add.png" class="image_input type1"id="4"/> </div> </div> </div> </div> <div class="ui-grid-a" style="background-color: #FF9A14; height: 60px; margin: 0px; padding: 0px;"> <div class="ui-block-a" style="color: FFFFFF; height: 60px; line-height: 60px; padding-left: 5%; font-size: 16px;">购物车 </div> <div class="ui-block-b" align="right"> <input type="image" src="image/12.jpg" style="height: 60px;" value="结算" /> </div> </div> </div> </body> </html>
希望在这个网页中实现结算物品的总价和现实购物车物品数量
解决方案
你这个页面代码贴的眼中有问题啊,我还原不出来!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css" />
* { font-size: 18px; }
.shangping { font-size: 18px; font-weight: bold; }
.jine { font-size: 24px; font-weight: bold; color: #FF9900; text-align: right; }
.ui-block-c { text-align: right }
.num { border: 1px solid #d6d6d6; vertical-align: middle; padding-left: 5px; padding-right: 5px; margin: 0px; text-align: center; margin: 0px -6px 0px -6px; }
.image_input { width: 36px; }
$(document).ready(function() { //????????
$("#type0").click(function() {
var oldRoomsCount = parseInt($("#num_1").val());
if (oldRoomsCount == 1)
{ return; }
oldRoomsCount--;
$("#num_1").text(oldRoomsCount); /* refreshTotalAmount(); */ });
//???????? $("#type1").click(function() {
var oldRoomsCount = parseInt($("#num_1").val());
oldRoomsCount++;
$("#num_1").text(oldRoomsCount); /* refreshTotalAmount(); */ }); });
解决方案二:
选择器用错了,html标签页没结束。。最后2个项的span没有结束标准,要补上
$(document).ready(function () {
//数量递减
$(".type0").click(function () {
var span = $(this).next();
var oldRoomsCount = parseInt(span.text()) || 0;
if (oldRoomsCount <= 1) {
return;
}
oldRoomsCount--;
span.text(oldRoomsCount);
/* refreshTotalAmount(); */
});
//数量递增
$(".type1").click(function () {
var span = $(this).prev();
var oldRoomsCount = parseInt(span.text()) || 0;
oldRoomsCount++;
span.text(oldRoomsCount);
/* refreshTotalAmount(); */
});
});
相关文章
- 新手 菜鸟 问题-求解数据结构课程设计问题
- java-算法如何运用在编程之中?菜鸟求解
- 递归-ext中tree数据量大加载缓慢
- 信息删除-菜鸟求教:csdn博客中的删除功能是如何实现的
- php上传excel导出pdf~菜鸟求教,大神指点
- 菜鸟提问!!!-求解,svn无法访问啊,本机都不行
- path-小白求解啊!!!!!!!!救急救急!!!!!!!!!!!!
- 框架-菜鸟请教个问题,请大神帮忙解答!!
- HTML与jsp跳转问题 菜鸟请教
- spring mvc-SpringMVC web项目中如何引入js,css等文件
【云栖快讯】2017互联网超级工程阿里双11完美落幕,交易额突破1682亿,但阿里工程师如何玩转“超级工程”,背后黑科技又是如何?12月13-14日,12位大咖直播分享揭秘1682亿背后技术实践,马上预约 详情请点击
热门推荐
- 高性能云服务器2折起
- 云服务器配置
- 技术资料
- 云计算
- 域名
- shell
- node.js
- 问答
- java
- mysql
- C++
- python
- jQuery
- Android
- asp
- PHP技巧
- jQuery教程
- JavaScript技巧
- JS
- SEO
- sql server
- mysql教程
- 前端
- 技术文集
- 技术
- 主题地图
- A
- z
- 云服务器哪家好
- API
- 大数据
- 云安全
- 云存储
- 云计算
- 获取公众号授权失败
- 兼容性疑难解答
- path
- stm32
- jsonobject
- product
前三篇
- c#-小白,写了个无限循环,一旦调用便会很快崩溃
- 8168 网络设置-DM8168双网口,一个能ping同一网段,一个不能
- do-定义一个变量的小问题
后三篇
- android开发-程序home以后service是否停止
- android开发-关于不同的activity获得SQLite对象
- python matplotlib-在python 2.7shell中出现如下错误
(yq.aliyun.com)为您免费提供求解啊-html菜鸟,请教大加如何实现这个功能相关信息,包括
求解啊
的信息
,所有求解啊-html菜鸟,请教大加如何实现这个功能相关内容均不代表的意见!
该页面h5页面的地址是:https://m.aliyun.com/yunqi/wenzhang/show_52443,您可以点击求解啊-html菜鸟,请教大加如何实现这个功能-手机站访问。
- 推荐产品
云数据库RDS
稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一
立即查看
云服务器9.9元 限时抢购
6款热门基础云产品6个月免费体验;2款产品1年体验;1款产品2年体验
9.9元 立即购买
云服务器ECS
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率
立即查看
开发者软件
开发者常用软件,超百款实用软件一站式提供
立即查看
-
热门标签
系统开发
调用函数
missing
组态王modbus通讯
装饰器
motionevent
visual studio 2012
mac safari
五环图
dcf
64位虚拟打印
套接字编程
非标准csp加密
文件管操作
右值
struct2
crystal report
extjs sencha
文件拷贝
获取素材列表
-
社区推荐
更多>
- 好东西来了!2017云栖大会400+份重磅资料下载
- 叮咚!您有一份2017杭州云栖大会参会指南待签收【持续更...
- 重磅发布背后:POLARDB的中国故事
- 传统应用层逻辑分库DB迁移阿里云DRDS+RDS分布式数...
- 海量用户实时定位和圈人 - 团圆社会公益系统(位置寻人\...
- 京颐CTO宋建康:如何应对系统高度分化异构的挑战,打造不...
- 经典网络迁移VPC最佳实践
- 揭秘IPHONE X刷脸认证的技术奥秘
- 5大场景护航企业成长,实例解析阿里云适应性网络架构
- 专访阿里云异构计算负责人:异构计算,GPU、FPGA、A...
-
看了此文的人还看了
- 新手求助“IntelLij Idea”
- 微信摇一摇周边素材管理-上传图片素材接口 java实现方...
- java web项目部署之后,运行几天会不正常,登录页面...
- java web-javaweb启动时,浏览器进不去页面...
- 51单片机汇编程序,将内部存储器E0H开始的32个单元数...
- 如何使用pptp在ubuntu下搭建动态ip的vpn
- 控件-java后台模拟网银登录
- ZipOutputStream压缩问题
- AE+C#实现类似ArcGIS点击属性的某一行,实现要素...
- web service如何和其他系统通信?
热门活动更多>
- 云服务器9.9元抢购
6款产品 6个月免费体验
查看详情>
- 搭建网站/应用首选
轻量应用服务器 45元/月
查看详情>
- 全新云服务器限时2折起
I/O优化,独享IP,性能提升20%
查看详情>
热点导航
- 高性能云服务器2折起
- 域名查询
- 网站域名whois查询
- 云计算
- 网站服务器价格
- 域名注册
- bootstrap table
- MySQL三节点
- MySQL读写分离
- 技术资料
- 阿里云邀请码
- product
- cfbundleidentifier报错
- echarts地图json数据
- webstorm开发javaweb
- 社区
- 技术
- 滚动条
- mysql upgrade
- ie浏览器不加载样式
- c primer 第五版
- java实现opc client
- post请求
- 支付宝同步和异步通知
- product1
- 三合一云商城建设
- 软件安装环境配置
- 技术
- 钉钉收费
- 问答
- 数据算法竞赛