<!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="./js/jquery-3.6.0.js"></script>
<script>
$(function(){
// 为btnAdd绑定按钮事件
$("#btnAdd").click(function(){
// 获取quantity元素
var quantity =parseInt($("#quantity").val())+1;
// 将quantity结果设置为quantity最终显示
$("#quantity").val(quantity);
// 如果数字大于1 减号图标由不能点击变为可点击
if(quantity>1){
$("#btnMinus").prop("disabled",false)
}
})
$("#btnMinus").click(function(){
var quantity = $("#quantity").val()-1;
$("#quantity").val(quantity);
if(quantity==1){
$("#btnMinus").prop("disabled",true);
$(this).prop("disabled",true);
}
})
})
</script>
</head>
<body>
<button id="btnMinus" disabled>-</button>
<input type="text" id="quantity" value="1" size="1" />
<button id="btnAdd">+</button>
</body>
</html>