商品规格选择案列

最新推荐文章于 2024-08-01 12:09:52 发布

碵蝎

最新推荐文章于 2024-08-01 12:09:52 发布

阅读量2.2k

点赞数

分类专栏：旧技术

本文链接：https://blog.csdn.net/QQ408896436/article/details/53817747

版权

旧技术专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
a{text-decoration: none}
.ware_sp_list{clear: both;}
.sp_color{clear: both;/* height: 27rem;*/ padding-bottom: 1rem; overflow: auto;}
.sp_color h2{height:3.2rem; line-height: 3.2rem; font-size: 1.3rem; color: #6e6e6e; padding: 0.3rem 0 0 1.6rem; }
.sp_color_bnt a{display: block; height: 2.7rem; line-height: 2.7rem; font-size: 1.0rem; text-align: center; float: left; border-radius: 0.25rem; margin: 0 0 0.5rem 1.6rem;  }
.sp_color_bnt .have{ border: 1px solid #c1c2c4; color: #000; }
.sp_color_bnt .no{ background: #dbdbdb; border: 1px solid #9baab5; color: #fff; cursor: default;}
.sp_color_bnt .small{padding: 0.2rem 0.8rem;}
.gmtc .sp_color_bnt .center{width: 15.8rem;}
.gmtc .sp_color_bnt .big{width: 24.5rem;}
.sp_color_bnt .select{ background: #f0514b; border-color: #f0514b; color: #fff;}
</style>
<script>
    var _w = document.documentElement.clientWidth || document.body.clientWidth,
        _h = document.documentElement.clientHeight || document.body.clientHeight;
    pageW = 750;
    document.documentElement.style.fontSize = _w/pageW*20+'px';
</script>
<body>
<div class="sp_color" id="sp_color_jrgwc">
    <div class="ware_sp_list">
        <h2>颜色</h2>
        <div class="sp_color_bnt clearfix" id="sp_color_bnt_0">
            <a class="have small" href="javascript:">白色</a>
            <a class="have small" href="javascript:">绿色</a>
            <a class="have small" href="javascript:">红色</a>  
        </div>
    </div>
    <div class="ware_sp_list">
    <h2>尺码</h2>
        <div class="sp_color_bnt clearfix" id="sp_color_bnt_1">
            <a class="have small" href="javascript:">100cm</a>
            <a class="have small" href="javascript:">200cm</a>
            <a class="have small" href="javascript:">300cm</a>  
        </div>
    </div>
    <div class="ware_sp_list">
        <h2>分辨率</h2>
        <div class="sp_color_bnt clearfix" id="sp_color_bnt_2">
            <a class="have small" href="javascript:">高清(3000*3000)</a>
            <a class="have small" href="javascript:">高清(2000*2000)</a>
            <a class="have small" href="javascript:">普通(1000*1000)</a>
        </div>
    </div>
</div>
<script src="http://ossweb-img.qq.com/images/js/zepto/zepto.min.js"></script>
<script>

    
    var gx = [

        [ [5,6], [3,4], [5,7] ],
        [ [1], [1], [0,2] ],
        [ [0], [2], [] ]

    ];


    $('#sp_color_jrgwc a').click(function(){

        //灰色的按钮不能被点击
        if(this.className.indexOf('no') != -1){return;}

        //获取当前点击按钮的关系列表
        var arr = gx[ $(this).parent().parent().index() ][ $(this).index() ];

        //选中
        if (this.className.indexOf('select') == -1) 
        {
            //如果某行中，已经有一个按钮被选中了，则需要清除
            var alist = $(this).parent().parent().find('a');
            for(var i=0; i<alist.length; i++)
            {
                var a = alist[i];
                if (a.className.indexOf('select') != -1) 
                {
                    $(a).removeClass('select');
                    var noa = gx[ $(a).parent().parent().index() ][ $(a).index() ];
                    for(var i in noa){
                        $('#sp_color_jrgwc a').eq(noa[i]).removeClass('no');
                    }
                }
            }

            $(this).addClass('select');
            for(var i=0; i<arr.length; i++)
            {
                var a = $('#sp_color_jrgwc a').eq(arr[i]).get(0);
                a.className = a.className + ' no';
                $(a).removeClass('select');
            }
        }
        //取消选中
        else
        {
            $(this).removeClass('select');
            for(var i in arr){
                $('#sp_color_jrgwc a').eq(arr[i]).removeClass('no');
            }
        }     

    });


   


</script>
</body>
</html>