求商品规格选择-求JQ或JS仿淘宝商品详情选择规格颜色等功能

问题描述

求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>

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，自己参考，注意规则数据结构，不是你这种形式的。。

jquery仿淘宝规格颜色选择效果

解决方案二：

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仿淘宝规格颜色选择效果

尺寸:

颜色:

黑色
白色
红色
黄色
蓝色

淘宝无线-仿淘宝商品详情页的&quot;拖动效果&quot;,和拖出来的&quot;导航置顶&quot;滑动导航下的视图
c++-用C++做个B2c电子商务，没有思路，请大神指教！
C语言怎么读取3个字节的整型数据
鲜果联播-android 加入购物车界面实现急求大神解惑
android 购物-类似于手机淘宝中的功能
手机web端（或微信端），实现仿淘宝的“继续拖动查看详情”效果
电商商品详情-淘宝网的商品详情是怎么保存在数据库的？
javascript-一个移动端JS效果在线等
购物车-实现类似淘宝网颜色尺寸选择器
表单-淘宝发布宝贝宝贝规格js单击颜色分类自动生成table 项目今天要上线了，请务必帮忙解决谢谢

【云栖快讯】他，一路保送，但可能不是你想象中的学霸；他，曾是微软最年轻的技术管理者，挑战带领跨国团队；他，后来加入阿里，成为阿里西雅图分部的第22名员工；他，就是阿里通用计算平台负责人关涛！通过短视频，为你揭晓他的成长和开发计算平台的经历，以及他对未来的展望！详情请点击

求商品规格选择-求JQ或JS仿淘宝商品详情选择规格颜色等功能

问题描述

解决方案

相关文章

热门推荐