技術標籤：js小功能jquery

<style>
.num-input {
  height: 30px;
}
.num-input button {
  width: 22px;
  height: 100%;
}
.num-input input {
  width: 35px;
  height: 100%;
  text-align: center;
}
// 去除input number型別時自帶的上下箭頭
.num-input input::-webkit-outer-spin-button,
.num-input input::-webkit-inner-spin-button
 
 {
  -webkit-appearance: none;
}
.num-input input[type="number"] {
  -moz-appearance: textfield;
}
</style>

<div class="num-input">
    <button id="subVal">-</button>
    <input id="number" type="number" value="1" >
 

    <button id="addVal">+</button>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    // 給input框宣告一個變數
    var n = $('#number')
    // 減
    $('#subVal').click(function() {
        // parseInt() 轉化為數字型別
        console.
 
log(parseInt(n.val()))
        
        if(parseInt(n.val()) < 1) {
            // 小於1時 預設恢復為1
            n.val(1)
        } else if(parseInt(n.val()) > 1) {
            // 大於1時 點選減1
            n.val(parseInt(n.val())-1)
        } else { 
            // 小於1時 給減按鈕新增一個禁止點選的狀態
            $('#subVal').attr('disabled','disabled')
        }
    })

    // 加
    $('#addVal').click(function() {
        if(parseInt(n.val()) < 1) {
            // 小於1時 預設恢復為1
            n.val(1)
        } else {
            // 大於1時 點選加1
            n.val(parseInt(n.val())+1)
            // 大於1時 解除減按鈕禁止點選的狀態
            $('#subVal').removeAttr('disabled')
        }

        console.log(parseInt(n.val()))
    })
</script>  

參考：https://blog.csdn.net/qq_42354773/article/details/80974852