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

2016-8-9:新增剩余数量。

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

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

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

 


原创文章,转载请注明出处:jquery仿淘宝规格颜色选择效果

评论(0)Web开发网
阅读(2972)喜欢(3)不喜欢(2)JavaScript/Ajax开发技巧