查看“商品详情页的开发4”的源代码
←
商品详情页的开发4
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==增加鼠标悬停、图片变换的动作== (文件名称)detail/index.js 在bindEvent函数中添加: <nowiki>var _this = this; // 图片预览 $(document).on('mouseenter', '.p-img-item', function(){ var imageUrl = $(this).find('.p-img').attr('src'); $('.main-img').attr('src', imageUrl); });</nowiki> 代码或结果截图: [[文件:web6-11.png]] ==改变商量数量的操作== (文件名称)detail/index.js 在bindEvent函数中添加: 代码: <nowiki>// count的操作 $(document).on('click', '.p-count-btn', function(){ var type = $(this).hasClass('plus') ? 'plus' : 'minus', $pCount = $('.p-count'), currCount = parseInt($pCount.val()), minCount = 1, maxCount = _this.data.detailInfo.stock || 1; if(type === 'plus'){ $pCount.val(currCount < maxCount ? currCount + 1 : maxCount); } else if(type === 'minus'){ $pCount.val(currCount > minCount ? currCount - 1 : minCount); } });</nowiki> 在刚才加载函数loadDetail中加入缓存数据的语句: <nowiki>// 加载商品详情的数据 loadDetail : function(){ var _this = this, html = '', $pageWrap = $('.page-wrap'); // loading $pageWrap.html('<div class="loading"></div>'); // 请求detail信息 _product.getProductDetail(this.data.productId, function(res){ _this.filter(res); // 缓存住detail的数据 _this.data.detailInfo = res; // render html = _mm.renderHtml(templateIndex, res); $pageWrap.html(html); }, function(errMsg){ $pageWrap.html('<p class="err-tip">此商品太淘气,找不到了</p>'); }); }, </nowiki> 效果: [[文件:web6-12.png]] ==添加‘加入购物车’动作== ===添加‘加入购物车动作=== 文件:detail /index.js 在bindEvent函数中添加 <nowiki>// 加入购物车 $(document).on('click', '.cart-add', function(){ _cart.addToCart({ productId : _this.data.productId, count : $('.p-count').val() }, function(res){ window.location.href = './result.html?type=cart-add'; }, function(errMsg){ _mm.errorTips(errMsg); }); });</nowiki> ===写服务端函数=== 文件 service /cart-service.js <nowiki>// 添加到购物车 addToCart : function(productInfo, resolve, reject){ _mm.request({ url : _mm.getServerUrl('/cart/add.do'), data : productInfo, success : resolve, error : reject }); },</nowiki> 注:前面的函数结尾别忘了添加逗号 ===修改处理结果页面=== Result.html添加: <nowiki><div class="result-con cart-add-success"> <h1 class="result-title">您的商品已成功加入购物车!</h1> <div class="result-content"> <a class="link" href="./index.html">继续购物</a> <a class="link" href="./cart.html">去购物车查看</a> </div> </div></nowiki> [[文件:web6-13.png]]
返回至
商品详情页的开发4
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息