我在重新分配变量然后适当更改代码时遇到问题。我正在制作一个价格页面，用户可以在其中说出他们有多少员工，并且每个人每月需支付 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>最佳答案
将计算逻辑移至单独的函数。并在需要重新计算时调用它。
你的逻辑是正确的。数据属性在这里很好。您可以在“按月计费”等按钮上存储一些元数据，这样当您处理点击时，您可以从元素中获取数据并使用更新的数据重新计算。
我已经用处理类型按钮和单独的重新计算逻辑更新了您的 fiddle
$(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>关于javascript - 如何重新分配变量并再次运行代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54201986/