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

Posted 2020-08-26 游子日月长

 

jquery实现的仿淘宝规格颜色选择效果源代码如下

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

－收缩html代码　　运行代码　　[如果运行无效果，请自行将源代码保存为html文件运行]
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>

<style>
dd,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}
dd.num input{height:50px}
</style>
<title>jquery仿淘宝规格颜色选择效果</title>
<div>
<dl>
<dt>尺寸:</dt>
<dd>
<ul id="size">
<li><a href="javascript:;" title="S">S</a></li>
<li><a href="javascript:;" title="M">M</a></li>
<li><a href="javascript:;" title="L">L</a></li>
<li><a href="javascript:;" title="XS">XS</a></li>
</ul>
</dd>
</dl>
<dl>
<dt>颜色:</dt>
<dd>
<ul id="color">
<li><a href="javascript:;" title="黑色">黑色</a></li>
<li><a href="javascript:;" title="白色">白色</a></li>
<li><a href="javascript:;" title="红色">红色</a></li>
<li><a href="javascript:;" title="黄色">黄色</a></li>
<li><a href="javascript:;" title="蓝色">蓝色</a></li>
</ul>
</dd>
</dl>
<dl>
<dt>数量:</dt>
<dd class="num">
<ul>
<li><input type="text" />（剩余：<b id="bNum"></b>）</li>
</ul>

</dd>
</dl>
</div>
<script>
    $(\'#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\');
        });
        $(\'#bNum\').html(kvNum[$(\'#size a.selected\').html() + $(\'#color a.selected\').html()] || \'\');
    });
    //建立尺寸和颜色的排除值数组
    var Rules = {
        M: [\'黑色\'],
        L: [\'红色\', \'蓝色\'],
        XS: [\'黄色\'],
        黑色: [\'XS\'],
        白色: [\'S\', \'M\'],
        红色: [\'M\']
    }
    //数量数组，尺寸和颜色并集
    var kvNum = {"M白色":10,"M红色":20,"M黄色":30,"L黑色":30,"L黄色":40,"S黑色":50,"S白色":60,"XS黑色":70,"XS白色":80/*..更多...*/};
</script>