jQ实现商品选购

最新推荐文章于 2021-01-30 18:45:53 发布

Alicesa

最新推荐文章于 2021-01-30 18:45:53 发布

阅读量209

点赞数

分类专栏：前端jQuery 文章标签： jquery html css

本文链接：https://blog.csdn.net/Alicesa/article/details/108278440

版权

前端jQuery 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品采购</title>
    <link rel="stylesheet" href="css/1.css">


</head>

<body>
    <div class="simg">
        <img src="img/1.png">

        <img src="img/2.png">
        <img src="img/3.png">
        <img src="img/4.png">
    </div>

    <div class="xz">

        <ul class="jx">

            <li>iPhone 11por</li>
            <li> iPhone 11por max</li>

        </ul>

        <ul class="wg">

            <li id="h">深空灰<span></span></li>
            <li id="y">银色<span></span></li>
            <li id="j">金色<span></span></li>
            <li id="l">暗绿色<span></span></li>


        </ul>

        <ul class="nc">

            <li>64GB</li>
            <li> 256GB</li>
            <li> 512GB</li>


        </ul>
        <div class="hj">合计：<span id="rmb">5288</span>RMB</div>
    </div>

</body>
<script src="dist/jquery.js"></script>
<script>
    $(function () {
 var jx= nc = 0;
        $(".jx>li").click(function () {
           
            $(".jx>li").eq($(this).index()).addClass('xd').siblings().removeClass('xd')
            var a = $(this).index();
            switch (a) {
                case 0:
                    jx = 300;
                    break;
                case 1:
                    jx = 1200;
                    break;
                default:


            }

        })
        $(".wg>li").click(function () {
            $(".wg>li").eq($(this).index()).addClass('xd').siblings().removeClass('xd')
            $(".simg>img").eq($(this).index()).fadeIn(500).siblings().fadeOut(500);


        })
        $(".nc>li").click(function () {
            $(".nc>li").eq($(this).index()).addClass('xd').siblings().removeClass('xd')
            var b = $(this).index();
            switch (b) {
                case 0:
                    nc = 300;
                    break;
                case 1:
                    nc = 800;
                    break;
                case 2:
                    nc = 1200;
                    break;
                default:


            }
           var hj=5288+jx*1+nc*1
           $("#rmb").text(hj);

        })
       
    })


</script>

</html>