选择要求:有几个属性,如 尺寸和颜色,尺寸:M、L、XL、XXL 等,颜色:黑色、白色、黄色、红色等,其每个属性都有关联,如 首选M,颜色除黑色或其他外都能选择;如首选 黄色,尺寸除XXL或其他外都能选择。
自己写的有问题。代码放上一部分。已生成的数组求值。
HTML:↓
<div class="sys_item_spec">
<dl class="clearfix iteminfo_parameter sys_item_specpara" data-sid="1">
<dt>尺寸:</dt>
<dd>
<ul class="sys_spec_text" id="123">
<li data-aid="3" id="s"><a href="javascript:;" title="S" >S</a><i></i></li>
<li data-aid="3" id="m"><a href="javascript:;" title="M" >M</a><i></i></li>
<li data-aid="3" id="xs"><a href="javascript:;" title="XS" >XS</a><i></i></li>
</ul>
</dd>
</dl>
<dl class="clearfix iteminfo_parameter sys_item_specpara" data-sid="1">
<dt>颜色:</dt>
<dd>
<ul class="sys_spec_text" id="abc">
<li data-aid="3" id="b"><a href="javascript:;" title="黑色" >黑色</a><i></i></li>
<li data-aid="3" id="w"><a href="javascript:;" title="白色" >白色</a><i></i></li>
<li data-aid="3" id="r"><a href="javascript:;" title="红色" >红色</a><i></i></li>
</ul>
</dd>
</dl>
</div>
JS:↓
//说明:goodsguige[0] = ["分组ID1","分组规格名称","主ID","主规格名"];
goodsguige[0] = ["guige1","尺寸","s","S"];
goodsguige[1] = ["guige1","尺寸","m","M"];
goodsguige[2] = ["guige1","尺寸","xs","XS"];
goodsguige[5] = ["guige2","颜色","b","黑色"];
goodsguige[6] = ["guige2","颜色","w","白色"];
goodsguige[6] = ["guige2","颜色","r","红色"];
//说明:goodsgroup[0] = ["组号","分组ID","主ID"];
goodsgroup[0] = ["4","guige1","s"];
goodsgroup[1] = ["4","guige2","b"];
goodsgroup[2] = ["5","guige1","m"];
goodsgroup[3] = ["5","guige2","w"];
goodsgroup[4] = ["6","guige1","xs"];
goodsgroup[5] = ["6","guige2","r"];
goodsgroup[6] = ["7","guige1","m"];
goodsgroup[7] = ["7","guige2","r"];
goodsgroup[8] = ["8","guige1","xs"];
goodsgroup[9] = ["8","guige2","w"];
以前写的一个demo,自己参考,注意规则数据结构,不是你这种形式的。。
dl{zoom:1;overflow:hidden} dt,li{float:left;list-style:none;margin-left:10px;line-height:50px} dt a,li a{display:block;text-align:center;border:solid 1px #666;width:50px;height:50px;line-height:50px} li a.disabled{color:#aaa;border:dotted 1px #aaa;cursor:default} li a.selected{border:solid 3px red;height:46px;width:46px;line-height:46px}jquery仿淘宝规格颜色选择效果$('#size a,#color a').click(function () { var a = $(this), isSize = a.closest('ul').attr('id') == 'size'; if (a.hasClass('disabled') || a.hasClass('selected')) return false; $('#size a,#color a').removeClass('disabled'); $(isSize ? '#size a' : '#color a').removeClass('selected'); a.addClass('selected'); var s = ',' + (Rules[a.attr('title')] || []).join() + ','; //获取规则 $(isSize ? '#color a' : '#size a').each(function () { if (s.indexOf(',' + this.title + ',') != -1) $(this).removeClass('selected').addClass('disabled'); }); }); //建立尺寸和颜色的排除值数组 var Rules = { M: ['黑色'], L: ['红色', '蓝色'], XS: ['黄色'], 黑色: ['XS'], 白色: ['S', 'M'], 红色: ['M'] }