如何改进这个javascript以简化它并避免重复

Question

我创建了一个工作价格切换器，它还有一个追加销售移除器/添加器。虽然它运行得很好，但我想知道如何才能做得更好，因为我必须运行两个复合if/else语句来解释持续时间切换和追加销售切换。

HTML:

<div>
<p>Annually</p>
<!-- Toggle Button -->
<label for="toggle">
<!-- toggle -->
<div class="relative">
<!-- hidden input -->
<input
id="toggle"
type="checkbox"
class="hidden"
onclick="setPrice()"
data-sc-monthly="59"
data-both-monthly="79"
data-bc-monthly="20"
/>
<!-- line -->
<div></div>
<!-- dot -->
<div class="toggle_dot"></div>
</div>
</label>
<p>Monthly</p>
</div>
<div>
<div>
<h3>Main Report</h3>
<h4>$<span id="price">790</span></h4>
<p><span class="annual">ANNUALLY</span><span class="month hidden">MONTHLY</span></p>
<div>
<input
id="package"
type="checkbox"
onclick="setPackage()"
checked
/>
<h5>Include our special secondary coverage for just $<span id="bcValue">200</span></h5>
</div>
<a class="btn btn-success">
JOIN NOW
</a>
</div>
</div>

JAVASCRIPT:

<script>
const pricing = document.querySelector('#toggle');
var single = pricing.dataset.scMonthly;
var both = pricing.dataset.bothMonthly;
var bc = pricing.dataset.bcMonthly;
var price = both;
function setPackage(){
if (document.getElementById("package").checked == true) {
if (document.getElementById("toggle").checked == true) {
var price = both;
document.getElementById("price").innerHTML = price;
} else {
var price = both * 10;
document.getElementById("price").innerHTML = price;
}
} else {
if (document.getElementById("toggle").checked == true) {
var price = single;
document.getElementById("price").innerHTML = price;
} else {
var price = single * 10;
document.getElementById("price").innerHTML = price;
}
}
}
function setPrice() {
var x = document.querySelectorAll('.annual');
var y = document.querySelectorAll('.month');
for (var i = 0; i < x.length; i++) {
if (document.getElementById("toggle").checked == true) {
x[i].classList.add('hidden');
y[i].classList.remove('hidden');
if (document.getElementById("package").checked == true) {
document.getElementById("price").innerHTML = both;
} else {
document.getElementById("price").innerHTML = single;
}
document.getElementById("bcValue").innerHTML = bc;
} else {
x[i].classList.remove('hidden');
y[i].classList.add('hidden');
if (document.getElementById("package").checked == true) {
document.getElementById("price").innerHTML = both * 10;
} else {
document.getElementById("price").innerHTML = single * 10;
}
document.getElementById("bcValue").innerHTML = bc * 10;
}
}
}
</script>

正如你所看到的，每个函数都必须检查是否设置了其他函数控制的参数，并进行相应的调整。

我的JS-fu还不够强大，还不足以弄清楚如何全面改进这段代码。

Answer 1

由于您总是更新相同的元素，因此可以在分配结果之前计算出价格：

function setPackage(){
var price = document.getElementById("package").checked ? both : single;
if (document.getElementById("toggle").checked) {
price *= 10;
}
document.getElementById("price").innerHTML = price;
}

对于第二个函数，应该将更新价格的逻辑移出循环，以避免不必要地重复相同的操作。

function setPrice() {
var showMonthly = document.getElementById("toggle").checked;
var hideClass = showMonthly ? '.annual' : '.monthly'; // choose which info to hide
// display the currently hidden info
document.querySelectorAll('.hidden').forEach(function (el) {
el.classList.remove('hidden');
});
document.querySelectorAll(hideClass).forEach(function (el) {
el.classList.add('hidden');
});
var price = document.getElementById("package").checked ? both : single;
var multiplier = showMonthly ? 1 : 10;
document.getElementById("price").innerHTML = price * multiplier;
document.getElementById("bcValue").innerHTML = bc * multiplier;
}

Answer 2

以下是我根据CodeReview的回答使用的内容：

const pricing = document.querySelector('#toggle');
var single = pricing.dataset.scMonthly;
var both = pricing.dataset.bothMonthly;
var bc = pricing.dataset.bcMonthly;
var price = both;
for (const id of ["toggle", "package"]) {
document.getElementById(id).addEventListener("click", update);
}
function hideAll(query) {
for (const element of document.querySelectorAll(query)) {
element.classList.add("hidden");
}
}
function showAll(query) {
for (const element of document.querySelectorAll(query)) {
element.classList.remove("hidden");
}
}
function update() {
const package = document.getElementById("package").checked ? both : single;
let factor;
if (document.getElementById("toggle").checked) {
factor = 1;
hideAll(".annual");
showAll(".month");
} else {
factor = 10;
showAll(".annual");
hideAll(".month");
}
document.getElementById("price").innerHTML = package * factor;
document.getElementById("bcValue").innerHTML = bc * factor;
}