JQuery商品计价原理

至尊鸡

已于 2023-11-30 09:27:11 修改

阅读量280

点赞数 4

分类专栏： JQ 文章标签： javascript 前端 html

于 2023-02-25 17:28:28 首次发布

本文链接：https://blog.csdn.net/m0_72190449/article/details/129218159

版权

JQ 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

减到1不能再减

input输入数量回车显示总价

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery使用/jquery.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    button{
        width: 20px;
        height: 20px;
        line-height: 20px;
        justify-content: center;
    }
    input{
        width: 40px;
        height: 17px;
        line-height: 17px;
        justify-content: center;
        text-align: center;
    }
</style>
<script>
    $(function(){
        var n=$("input").val()
       /*  console.log(n); */
        $(".jia").click(function(){
            n++;
            $("input").val(n)
            $(".allprice").text((n*$(".price").text()).toFixed(2))

        })
        $(".jian").click(function(){
            if(n==1)
                return false
                n--;
            $("input").val(n)
            $(".allprice").text((n*$(".price").text()).toFixed(2))
        })
        $("input").change(function(){
            $(".allprice").html(($(".price").text()*$("input").val()).toFixed(2))
        })

    })
</script>
<body>
    <div class="box">
        <span>单价：</span>
        <div class="num">
            <div class="price">11.22</div>
            <button class="jia">+</button>
            <input type="text" name="" id="" class="num" value="1">
            <button class="jian">-</button>
        </div>
       
        <span>总价：</span>
        <div class="allprice">11.22</div>
    </div>
    
</body>
</html>