我在重新分配变量，然后适当更改代码方面遇到问题。我正在制作一个价格页面，用户在其中说出他们有多少员工，他们每个人每月被收取21美元的费用（锁定一年后）。 10名员工每个月$ 21，一年的收入为$ 2520。 $ 21是按年计费，如果公司想每月支付，则费用从$ 21变为$ 23。我的代码对于每月21美元（每年注册一次）的效果很好，但是如果公司只想每月支付，我如何在数据价格上增加2美元呢？默认情况下，每月21美元的“每年”按钮处于选中状态，但是如果用户单击“每月”按钮，我希望将其更改为23美元并开始使用该金额进行计算。我认为我的逻辑可能是错误的，因此任何建议都值得赞赏。 Here是到工作场所的链接，我试图模仿自己的做法。这是我到目前为止的内容。
$(document).ready(function() {
$(".checkout").on("input", ".quantity", function() {
var price = +$(".price").data("price");
var quantity = +$(this).val();
$("#total").text("$" + price * quantity);
})
var $buttonPlus = $('.increase-btn');
var $buttonMin = $('.decrease-btn');
var $quantity = $('.quantity');
/*For plus and minus buttons*/
$buttonPlus.click(function() {
$quantity.val(parseInt($quantity.val()) + 1).trigger('input');
});
$buttonMin.click(function() {
$quantity.val(Math.max(parseInt($quantity.val()) - 1, 0)).trigger('input');
});
}).btnHover:hover {
background-color:#17a2b8;
color:white;
}
.priceTitle {
font-weight: 700;
font-size: 15px;
color: #6bde9f;
text-align: center;
}
.pricing {
font-size: 65px;
font-weight: 400;
color: #6bde9f;
}<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<!--Yearly/Monthly Buttons-->
<div class="container" style="margin-top:50px;">
<center><div class="btn-group">
<button style="font-weight:bold;" id="yearly" type="button" class="btn btn-info">Billed Yearly</button>
<button type="button" id="monthlyBtn" class="btn btnHover">Billed Monthly</button>
</div></center>
</div>
<br>
<!--Calculation section-->
<div class="col-sm-12 col-md-4 checkout">
<div style="margin-bottom:-25px;">
<p class="price priceTitle" data-price="21">COMPANY</p>
</div>
<div class="row" style="padding-left:100px;">
<div class="col-6" style="height:50px;">
<p class="total pricing" style="float:right; margin-right:-15px;"><span id="total">$21</span></p>
</div>
<div class="col-6" style="height:90px;">
<p style="font-size:12px; margin-top:40px; margin-left:-12px;">per<br> month</p>
</div>
</div>
<center><div>
<p style="font-size:12px; margin-bottom:5px;">People on your team</p>
<button type="button" class="btn decrease-btn">-</button>
<input style="width:70px; text-align:center; padding-bottom:5px" type="text" class="rounded quantity" value="1"></input>
<button type="button" class="btn increase-btn">+</button>
</div></center>
</div>
答案 0 :(得分：1)
移动计算逻辑以分离功能。并在需要重新计算时调用它。
您的逻辑是正确的。数据属性在这里很好。您可以在其中存储一些元数据，例如“按月计费”，以便在单击时可以从元素获取数据并使用更新的数据重新计算。
我已通过处理类型按钮和单独的重新计算逻辑来更新您的小提琴
$(document).ready(function() {
var price = 21;
var $buttonPlus = $('.increase-btn');
var $buttonMin = $('.decrease-btn');
var $quantity = $('.quantity');
var $paymentType = $('.payment-type');
var $checkout = $(".checkout");
$checkout.on("input", ".quantity", function() {
recalc();
})
/*For plus and minus buttons*/
$buttonPlus.click(function() {
$quantity.val(parseInt($quantity.val()) + 1).trigger('input');
recalc();
});
$buttonMin.click(function() {
$quantity.val(Math.max(parseInt($quantity.val()) - 1, 0));
recalc();
});
$paymentType.click(function() {
var $btn = $(this);
price = $btn.data('price');
$('#period').text($btn.data('period'));
$paymentType.removeClass('btn-info');
$btn.addClass('btnHover');
recalc();
});
function recalc() {
var quantity = +$quantity.val();
$("#total").text("$" + price * quantity);
}
}).btnHover:hover {
background-color:#17a2b8;
color:white;
}
.priceTitle {
font-weight: 700;
font-size: 15px;
color: #6bde9f;
text-align: center;
}
.pricing {
font-size: 65px;
font-weight: 400;
color: #6bde9f;
}<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<!--Yearly/Monthly Buttons-->
<div class="container" style="margin-top:50px;">
<center><div class="btn-group">
<button style="font-weight:bold;" id="yearly" type="button" class="btn btn-info payment-type" data-price="21" data-type="year">Billed Yearly</button>
<button type="button" id="monthlyBtn" class="btn btnHover payment-type" data-price="23" data-type="month">Billed Monthly</button>
</div></center>
</div>
<br>
<!--Calculation section-->
<div class="col-sm-12 col-md-4 checkout">
<div style="margin-bottom:-25px;">
<p class="price priceTitle" data-price="21">COMPANY</p>
</div>
<div class="row" style="padding-left:100px;">
<div class="col-6" style="height:50px;">
<p class="total pricing" style="float:right; margin-right:-15px;"><span id="total">$21</span></p>
</div>
<div class="col-6" style="height:90px;">
<p style="font-size:12px; margin-top:40px; margin-left:-12px;">per<br> <span id="period">month</span></p>
</div>
</div>
<center><div>
<p style="font-size:12px; margin-bottom:5px;">People on your team</p>
<button type="button" class="btn decrease-btn">-</button>
<input style="width:70px; text-align:center; padding-bottom:5px" type="text" class="rounded quantity" value="1"/>
<button type="button" class="btn increase-btn">+</button>
</div></center>
</div>
</body>