商品样式选择

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wangyanxin928/article/details/53486498

html

<div>
    <b class="ml0 border0">规格：</b>
    <div class="list mt20">
        <span class="kept bdc4" >纪念卡(10张/套)</span>
        <span class="aliens bdc0">异形卡</span>
        <span class="even bdc0">连号套卡(2张/套)</span>

    </div>
    <b class="ml0 border0 ">图案：</b>
    <div class="list mt20">
        <span class="dolma bdc4"><i></i>度母像卡</span>
        <span class="pisces bdc0"><i></i>双鱼异形卡</span>
        <span  class="diamond bdc0"><i></i>菱形异形卡</span>
    </div>
</div>

css

.bdc0{border: 2px solid #c0c0c0;color: #999;}
.bdc4{border: 2px solid #c4a152!important;color: #333333;}

js

<script>
    $(document).ready(function () {
//       度母套卡
        $('.kept').click(function () {
            $(this).addClass('bdc4').siblings().removeClass('bdc4').addClass("bdc0");
            $(".dolma").addClass('bdc4').siblings().removeClass('bdc4');
            $(".pisces").removeClass('bdc4').addClass("bdc0");

        });
        $('.dolma').click(function () {
            $(this).addClass('bdc4').siblings().removeClass('bdc4').remove("cddd").addClass("bdc0");
            $(".kept").addClass('bdc4').siblings().removeClass('bdc4').addClass("bdc0");

//            $(".pisces").addClass('bdc4').siblings().removeClass('bdc4').addClass("bdc0");
        });

//       异形卡
        $('.aliens').click(function () {
            $(this).addClass('bdc4').siblings().removeClass('bdc4').addClass("bdc0");
            $(".pisces").addClass('bdc4').siblings().removeClass('bdc4').addClass("bdc0");

        });
        $('.diamond').click(function () {
            $(this).addClass('bdc4').siblings().removeClass('bdc4').addClass("bdc0");
            if($(".kept").is(".bdc4")){
                $('.kept').removeClass("bdc4").addClass("bdc0");
                $(".aliens").addClass('bdc4').siblings().removeClass('bdc4').addClass("bdc0");
            }
//            $(".diamond").addClass('bdc4').siblings().removeClass('bdc4').addClass("bdc0");
        });
        $('.pisces').click(function () {
            $(this).addClass('bdc4').siblings().removeClass('bdc4').addClass("bdc0");
            if($(".kept").is(".bdc4")){
                $('.kept').removeClass("bdc4").addClass("bdc0");
                $(".aliens").addClass('bdc4').siblings().removeClass('bdc4').addClass("bdc0");
            }
        });

//       连号卡
        $('.even').click(function () {
            $(this).addClass('bdc4').siblings().removeClass('bdc4').addClass("bdc0");
            $(".pisces").addClass('bdc4').siblings().removeClass('bdc4').addClass("bdc0");


        })

    });
</script>