Question

JQ或JS仿淘宝商品详情选择规格颜色等属性

选择要求：有几个属性，如 尺寸和颜色，尺寸：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>
</div>
JS：↓
goodsguige[0] = ["分组ID","尺寸","唯一主ID","S"];
goodsguige[1] = ["分组ID","尺寸","唯一主ID","M"];
goodsguige[2] = ["分组ID","尺寸","唯一主ID","XS"];
goodsguige[5] = ["分组ID","颜色","唯一主ID","黑色"];
goodsguige[6] = ["分组ID","颜色","唯一主ID","白色"];
goodsgroup[0] = ["4","分组ID1","唯一主ID"];
goodsgroup[1] = ["4","分组ID2","唯一主ID"];
goodsgroup[2] = ["5","分组ID1","唯一主ID"];
goodsgroup[3] = ["5","分组ID2","唯一主ID"];
goodsgroup[4] = ["6","分组ID1","唯一主ID"];
goodsgroup[5] = ["6","分组ID2","唯一主ID"];
goodsgroup[6] = ["7","分组ID1","唯一主ID"];
goodsgroup[7] = ["7","分组ID2","唯一主ID"];
选尺码或颜色都需要对比的。 我的JS，现在有问题，选择尺码后，颜色有几个点不上了。

字数太多，发不上来。。
目前流程：
$(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");
i.attr("data-attrval",$(this).attr("id"));
}
getgoodid() //输出，方法里实现选项。
})
})
//获取对应属性
function getgoodid(){}

• 你的回答被采纳后将获得：
• 系统奖励15（财富值+成长值）+难题奖励10（财富值+成长值）+提问者悬赏100（财富值+成长值）

Answer 1

程序员很辛苦的，这不刚猝死一个
没时间找妹子，哪有时间看这一坨一坨的
建议你搞个codepen或者jsfiddle，开源中国的那个在线编辑器也不错
这样也方便交流，调试。

尝试一下：
这个尺寸和颜色的联动，如何建立尺寸和颜色对应关系，以方便js操作是设计关键
http://jsfiddle.net/xcchcaptain/11ez4ce5/1/
还有些待完善的，也不知能否帮到你

追问

单对单实现的，只针对点击 size才行。。首次我就实现了，现在是选择后，有1或多个属性不能点击，如问题中的图类似。

Answer 2

https://github.com/shinezzil/Zsuit 我写了一个，你可以用下看看，有问题找我