好资源导航 » 文章资讯 » jquery实现商品sku多属性选择功能（商品详情页）

jquery实现商品sku多属性选择功能（商品详情页）

2023-08-04 06:34:04 62

SKU=StockKeepingUnit（库存量单位）。即库存进出计量的基本单元，可以是以件，盒，托盘等为单位。

SKU是用来定价和管理库存的，比如一个产品有很多颜色，很多配置，每个颜色和配置的组合都会形成新的产品，这时就产生很多SKU，sku在传统线下行业也是一个非常常用的概念，尤其是服装行业，同款不同尺码不同色都是独立的SKU，需要有独立的条形码，独立的库存管理等。

实现效果

源码





商品SKU选择DEMO3



ul,li{padding:0px;margin:0px;}
#panel{width:500px;margin:30pxauto;}
.goods_attr{overflow:hidden;}
.goods_attr.label{font:12px/30px'宋体';color:#777;width:50px;;padding-right:10px;float:left;display:block;}
.goods_attrul{float:left;width:300px;}
.goods_attrli{color:#333;overflow:hidden;position:relative;float:left;text-align:center;vertical-align:middle;border:1pxsolid#999;text-indent:0;cursor:pointer}
.goods_attrli.b{border:1pxdotted#CCC;color:#DDD;pointer:none;}
.goods_attrli.bimg{opacity:0.4;}
.goods_attrli.sel{border:1pxsolid#c80a28;color:#333;}
.goods_attrli.text{margin:5px10px5px0;height:23px;line-height:23px;text-indent:0;padding:023px;font-style:normal;}
.goods_attrli.img{margin-right:10px;width:35px;height:35px;line-height:35px;text-align:center;}

部分截图展示说明，一个div放置数据，一个放置效果。模拟后台，结构是根据jquery语法动态展示的。

一些jquery语法解释

key是对应动态展示的效果，可以扩展属性值。sku_list是存在的属性组合。

存在的是指，在这里是有attr1，attr2，attr3，attr4（相当于颜色，尺寸，内存，型号）这4种规格，里面有2x4x3x2=48种组合，而实际上售卖的组合只有9种，就是sku__list列出来的。

一些函数说明

这2个函数是动态展示数据和结构，依据是上面图中的2个数组。keys和sku_list

总结

以上所述是小编给大家介绍的jquery实现商品sku多属性选择功能（商品详情页），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

jquery实现商品sku多属性选择功能（商品详情页）

热门推荐

随机推荐