jquery仿淘宝商城选择商品尺寸与大小颜色功能

jquery仿淘宝商城选择商品尺寸与大小颜色功能。

相关代码:https://download.csdn.net/download/pizilii/10537694

jquery代码调用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<script>
//价格json
var  sys_={
     "mktprice" : "13.00" ,
     "price" : "6.80" ,
     "sys_attrprice" :{ "3_13" :{ "price" : "6.80" , "mktprice" : "13.00" }, "3_14" :{ "price" : "7.80" , "mktprice" : "14.00" }, "3_16" :{ "price" : "8.80" , "mktprice" : "15.00" }, "3_17" :{ "price" : "9.80" , "mktprice" : "16.00" }, "4_13" :{ "price" : "6.80" , "mktprice" : "13.00" }, "4_14" :{ "price" : "7.80" , "mktprice" : "14.00" }, "4_16" :{ "price" : "8.80" , "mktprice" : "15.00" }, "4_17" :{ "price" : "9.80" , "mktprice" : "16.00" }, "8_13" :{ "price" : "6.80" , "mktprice" : "13.00" }, "8_14" :{ "price" : "7.80" , "mktprice" : "1400" }, "8_16" :{ "price" : "8.80" , "mktprice" : "15.00" }, "8_17" :{ "price" : "9.80" , "mktprice" : "16.00" }, "9_13" :{ "price" : "6.80" , "mktprice" : "13.00" }, "9_14" :{ "price" : "7.80" , "mktprice" : "14.00" }, "9_16" :{ "price" : "8.80" , "mktprice" : "15.00" }, "9_17" :{ "price" : "9.80" , "mktprice" : "16.00" }, "10_13" :{ "price" : "6.80" , "mktprice" : "13.00" }, "10_14" :{ "price" : "7.80" , "mktprice" : "14.00" }, "10_16" :{ "price" : "8.80" , "mktprice" : "15.00" }, "10_17" :{ "price" : "9.80" , "mktprice" : "16.00" }, "12_13" :{ "price" : "6.80" , "mktprice" : "13.00" }, "12_14" :{ "price" : "7.80" , "mktprice" : "14.00" }, "12_16" :{ "price" : "8.80" , "mktprice" : "15.00" }, "12_17" :{ "price" : "9.80" , "mktprice" : "16.00" }}};
//商品规格选择
$( function (){
     $( ".sys_item_spec .sys_item_specpara" ).each( function (){
         var  i=$( this );
         var  p=i.find( "ul>li" );
         p.click( function (){
             if (!!$( this ).hasClass( "selected" )){
                 $( this ).removeClass( "selected" );
                 i.removeAttr( "data-attrval" );
             } else {
                 $( this ).addClass( "selected" ).siblings( "li" ).removeClass( "selected" );
                
             }
             getattrprice()  //输出价格
         })
     })
     //获取对应属性的价格
     function  getattrprice(){
         var  defaultstats= true ;
         var  _val= '' ;
         var  _resp=
             price: ".sys_item_price"
         }   //输出对应的class
         $( ".sys_item_spec .sys_item_specpara" ).each( function (){
           
             var  v=i.attr( "data-attrval" );
             if (!v){
                 defaultstats= false ;
             } else {
                 _val+=_val!= "" ? "_" : "" ;
               
             }
         })
         if (!!defaultstats){
             _mktprice=sys_item[ 'sys_attrprice' ][_val][ 'mktprice' ];
             _price=sys_item[ 'sys_attrprice' ][_val][ 'price' ];
         } else {
             _mktprice=sys_item[ 'mktprice' ];
           
         }
         //输出价格
         $(_resp.mktprice).text(_mktprice);   ///其中的math.round为截取小数点位数
         $(_resp.price).text(_price);
     }
})
</script>



  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
因为demo太大请移步github: https://github.com/shabake/GHAlibabaSpecificationSelectionDemoFeatures初始化确定按钮颜色置灰,不可点击。当 spu 颜色数量大于1个时,显示颜色导航,底部列表可以滚动,反之隐藏,布局自适应。如果有颜色导航,输入或点击 + - 按钮,颜色导航对应的颜色数字同步变化,如果数量大于99显示99+;如果数量小于1不显示。点击> < 底部列表和颜色导航同步滚动。输入或点击 + - 按钮,当按 +到最大库存 + 置灰;当按 - 到0 - 置灰。点击输入框。键盘弹出,规格选择器 上移;点击完成,键盘收回,规格选择器 回到原位。点击颜色导航条的颜色标签,高亮被点击颜色标签并滚动到屏幕中心,底部列表滑动到对应位置,同时切换 sku 图片。当输入或者点击数量大于1,确定按钮可点击,颜色高亮。当库存不足的时候,输入框下显示库存不足标签。输入框不可输入 0 ,. 。列表行自适应高度,布局中心对齐。点击背景遮罩或者 x ,收回弹窗。动态输入监听,同步显示,根据输入判定确定状态。数据模型重新组装。适配IPhoneX及以上系列。使用demo 数据是从接口获取,需要连接wifi或蜂窝网络。数据结构 (点击箭头展开/收起)GHSpecificationSelectionTitleModel 颜色导航器模型 GHSpecificationSelectionModel sku 模型 GHSpecificationSelectionImageModel 图片模型初始化对象 GHAlibabaSpecificationSelection继承 GHPopView ,GHPopView 已经封装好弹出/收回动画,外部无需重复处理。- (void)show;- (void)dismiss传入数据/*** 数据源* @param skuList 装skuModel数组* @param colors 颜色数组 非必传,如果为空,不显示颜色导航* @param sectePrice 价格区间字典*/[self.alibabaSpecificationSelection setSkuList:specifications colors:colors sectePrice:sectePrice];​取出用户选择_alibabaSpecificationSelection.getDataBlock = ^(NSArray * _Nonnull dataArray) {NSMutableString *string = [NSMutableString string];for (NSDictionary *dict in dataArray) {[string appendFormat:@"颜色:%@ 数量:%@ id:%@",dict[@"color"],dict[@"skuNum"],dict[@"skuId"]];}KAlert(@"用户选择的数据", string);};重置数据在这个方法内部清除所有count。底部scrollview 滚动到初始化状态。底部确定按钮初始化状态。scrollTitles初始化。- (void) resetData;与我联系45329453@qq.com

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值