jquery实现商品sku多属性选择（商品详情页）
程序员文章站
2023-09-28 22:07:39
转载于https://blog.csdn.net/csdn924618338/article/details/51455595 实现效果 源码 商品SKU ......</div>
<div class="content">
<p>转载于https://blog.csdn.net/csdn924618338/article/details/51455595</p>
<ul>
<li>实现效果</li>
</ul>
<p> <img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTEyMjEvYl8wXzIwMTkxMjIxMDMyMjIyNDE4Ni5wbmc=" alt="jquery实现商品sku多属性选择（商品详情页）" title="jquery实现商品sku多属性选择（商品详情页）"></p>
<p> </p>
<p> </p>
<ul>
<li>源码</li>
</ul>
<div class="cnblogs_code">
<pre class="brush: javascript;"><!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>商品sku选择demo3</title>
</head>
<body>
<style type="text/css">
ul,li{ padding:0px; margin:0px;}
#panel{ width:500px; margin:30px auto;}
.goods_attr{ overflow:hidden;}
.goods_attr .label {font: 12px/30px '宋体';color: #777;width: 50px;;padding-right: 10px;float: left; display:block;}
.goods_attr ul {float:left;width:300px;}
.goods_attr li{color:#333;overflow:hidden;position:relative;float:left;text-align:center; vertical-align:middle; border:1px solid #999;text-indent:0; cursor:pointer}
.goods_attr li.b{border:1px dotted #ccc;color:#ddd; pointer:none;}
.goods_attr li.b img {opacity:0.4;}
.goods_attr li.sel{ border:1px solid #c80a28;color:#333;}
.goods_attr li.text{margin:5px 10px 5px 0; height:23px;line-height:23px;text-indent:0;padding:0 23px;font-style:normal;}
.goods_attr li.img{ margin-right:10px;width:35px;height:35px; line-height:35px;text-align:center;}
</style>
<div id="panel">
<div id="panel_sku_list"><pre></pre></div>
<div id="panel_sel">
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script>
var keys = {
'attr1':['10','11','12'],
'attr2':['20','21','22','23'],
'attr3':['30','31','32'],
'attr4':['40','41']
};
//sku，stock keeping uint(库存量单位)
var sku_list=[
{'attrs':'10|20|30|40','num':120},
{'attrs':'10|21|30|40','num':10},
{'attrs':'10|22|30|40','num':28},
{'attrs':'10|22|31|41','num':220},
{'attrs':'10|22|32|40','num':130},
{'attrs':'11|23|32|41','num':120},
{'attrs':'11|22|32|41','num':120},
{'attrs':'11|22|31|41','num':120},
{'attrs':'11|22|31|40','num':120},
{'attrs':'12|22|31|40','num':120},
];
//显示html结构
function show_attr_item(){
var html='';
//k是下标，跟php不同
for(k in keys){
html+='<div class="goods_attr" > <span class="label">'+k+'</span>';
html+='<ul>'
for(k2 in keys[k]){
_attr_id=keys[k][k2];
html+='<li class="text" val="'+_attr_id+'" >';
html+='<span>'+_attr_id+'</span>';
html+='<s></s>';
html+='</li>'
}
html+='</ul>';
html+='</div>';
}
$('#panel_sel').html(html);
}
//显示数据
function show_data(sku_list){
var str="";
for( k in sku_list){
str+=sku_list[k]['attrs']+"\t"+sku_list[k]['num']+"\n";
}
$('#panel_sku_list pre').html(str);
}
show_data(sku_list);
show_attr_item();
//返回对象中的一个数组，有attr属性
function filterproduct(ids){
var result=[];
$(sku_list).each(function(k,v){
_attr='|'+v['attrs']+'|';
_all_ids_in=true;
for( k in ids){
if(_attr.indexof('|'+ids[k]+'|')==-1){
_all_ids_in=false;
break;
}
}
//把数组中的id所在那行的所有元素都压入result。最后返回
if(_all_ids_in){
result.push(v);
}
});
return result;
}
function filterattrs(ids){
var products=filterproduct(ids);
//console.log(products);
var result=[];
$(products).each(function(k,v){
//括号内的还是返回一个数组，concat函数是拼接一个或多个函数。
result=result.concat(v['attrs'].split('|'));
});
return result;
}
//已选择的节点数组
function _getselattrid(){
var list=[];
$('.goods_attr li.sel').each(function(){
list.push($(this).attr('val'));
});
return list;
}
//注册点击事件
$('.goods_attr li').click(function(){
if($(this).hasclass('b')){
return ;//被锁定了
}
if($(this).hasclass('sel')){
$(this).removeclass('sel');
}else{
$(this).siblings().removeclass('sel');
$(this).addclass('sel');
}
var select_ids=_getselattrid();
// console.log(select_ids);
////已经选择了的规格
var ids=filterattrs(select_ids);
//如果id不在已选id所在行组成的数组中，则然他禁止点击
$('#panel_sel').find('li').each(function(k2,li2){
if($.inarray($(li2).attr('val'),ids)==-1){
$(li2).addclass('b');
}else{
$(li2).removeclass('b');
}
});
});
</script>
</body>
</html></pre>
</div>
<p> </p>
<p> </p>
<hr>
<p> </p>
<ul>
<li>部分截图展示说明，一个div放置数据，一个放置效果。模拟后台，结构是根据jquery语法动态展示的。<img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTEyMjEvYl8wXzIwMTkxMjIxMDMyMjIyMTI3MS5qcGc=" alt="jquery实现商品sku多属性选择（商品详情页）" title="jquery实现商品sku多属性选择（商品详情页）">
</li>
</ul>
<p> </p>
<ul>
<li>一些jquery语法解释</li>
</ul>
<p>key是对应动态展示的效果，可以扩展属性值。sku_list是<span style="color: #ff0000;">存在的</span><span style="color: #00ff00;">属性组合。</span></p>
<p><span style="color: #00ff00;"><span style="color: #000000;">存在的是指，在这里是有attr1，attr2，attr3，attr4（相当于颜色，尺寸，内存，型号）这4种规格，里面有2x4x3x2=48种组合，而实际上售卖的组合只有9种，就是sku__list列出来的。</span></span></p>
<p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTEyMjEvYl8wXzIwMTkxMjIxMDMyMjIyMzA1Ny5qcGc=" alt="jquery实现商品sku多属性选择（商品详情页）" title="jquery实现商品sku多属性选择（商品详情页）"></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<ul>
<li>一些函数说明</li>
</ul>
<p> </p>
<p>这2个函数是动态展示数据和结构，依据是上面图中的2个数组。keys和sku_list</p>
<p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTEyMjEvYl8wXzIwMTkxMjIxMDMyMjIzODA3Mi5qcGc=" alt="jquery实现商品sku多属性选择（商品详情页）" title="jquery实现商品sku多属性选择（商品详情页）"></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTEyMjEvYl8wXzIwMTkxMjIxMDMyMjIzNTE1Ny5qcGc=" alt="jquery实现商品sku多属性选择（商品详情页）" title="jquery实现商品sku多属性选择（商品详情页）"></p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/2046752.html">
用python重新定义【2019十大网络流行语】 </a>
</p>
<p>
下一篇： <a href="/article/2046754.html">
Support URL </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2236276.html" target="_blank" title="微信小程序实现商品属性联动选择">
<h2>
微信小程序实现商品属性联动选择 </h2>
</a>
</li>
<li>
<a href="/article/2136696.html" target="_blank" title="微信小程序实现商品属性联动选择">
<h2>
微信小程序实现商品属性联动选择 </h2>
</a>
</li>
<li>
<a href="/article/2046753.html" target="_blank" title="jquery实现商品sku多属性选择（商品详情页）">
<h2>
jquery实现商品sku多属性选择（商品详情页） </h2>
</a>
</li>
<li>
<a href="/article/2035771.html" target="_blank" title="Android实现多维商品属性SKU选择">
<h2>
Android实现多维商品属性SKU选择 </h2>
</a>
</li>
<li>
<a href="/article/1667229.html" target="_blank" title="微信小程序商品详情页规格属性选择示例代码">
<h2>
微信小程序商品详情页规格属性选择示例代码 </h2>
</a>
</li>
<li>
<a href="/article/1665254.html" target="_blank" title="jquery实现商品sku多属性选择功能（商品详情页）">
<h2>
jquery实现商品sku多属性选择功能（商品详情页） </h2>
</a>
</li>
<li>
<a href="/article/1405734.html" target="_blank" title="小程序实现商品属性选择或规格选择">
<h2>
小程序实现商品属性选择或规格选择 </h2>
</a>
</li>
<li>
<a href="/article/1216403.html" target="_blank" title="jquery实现商品sku多属性选择（商品详情页）">
<h2>
jquery实现商品sku多属性选择（商品详情页） </h2>
</a>
</li>
<li>
<a href="/article/1155448.html" target="_blank" title="Android实现多维商品属性SKU选择">
<h2>
Android实现多维商品属性SKU选择 </h2>
</a>
</li>
<li>
<a href="/article/1140385.html" target="_blank" title="jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法">
<h2>
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>