我需要為陣列中的每個專案和總數計算 15% 的折扣。
目前我有使用 reduce() 方法計算和顯示所有專案總折扣的解決方案，但是如何使用 reduce() 分別計算每個專案的折扣？有沒有辦法做到這一點，或者我應該使用不同的解決方案？
function getDomNodesBySelector(selector) {
return Array.from(document.querySelectorAll(selector));
}
document.querySelector('.total__button').addEventListener('click', applyDiscount);
function applyDiscount() {
let items = getDomNodesBySelector(".price-value");
let numDiscount = 15;
let totalValue = items.reduce((acc, cur) => acc (1 - (numDiscount / 100)) * cur.innerText, 0);
document.querySelector(".total-price-value").innerText = totalValue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Корзина заказов</title>
<link rel="stylesheet" href="https://code.s3.yandex.net/web-code/entrance-test/lesson-2/task-2/fonts.css">
<link rel="stylesheet" href="style.css">
</head>
<body >
<h1 >Корзина</h1>
<section >
<article >
<img src="https://code.s3.yandex.net/web-code/entrance-test/jacket.png" alt="如何使用 reduce() 計算陣列中每個專案的折扣？" >
<div >
<h2 >Have A Good Time x FA Two Tone куртка</h2>
<p >Цвет: Зеленый/Оранжевый</p>
<p >Размер: M</p>
<p >Количество: 1</p>
</div>
<div >
<p ><span >15890</span> руб.</p>
</div>
</article>
<article >
<img src="https://code.s3.yandex.net/web-code/entrance-test/vans.png" alt="如何使用 reduce() 計算陣列中每個專案的折扣？" >
<div >
<h2 >Vans Old Skool кеды</h2>
<p >Цвет: Черный/Белый</p>
<p >Размер: 43</p>
<p >Количество: 1</p>
</div>
<div >
<p ><span >6390</span> руб.</p>
</div>
</article>
<article >
<img src="https://code.s3.yandex.net/web-code/entrance-test/pop-DRS.png" alt="如何使用 reduce() 計算陣列中每個專案的折扣？" >
<div >
<h2 >Pop DRS Denim Stonewashed джинсы</h2>
<p >Цвет: Голубой</p>
<p >Размер: S</p>
<p >Количество: 1</p>
</div>
<div >
<p ><span >11290</span> руб.</p>
</div>
</article>
<article >
<img src="https://code.s3.yandex.net/web-code/entrance-test/by-parra.png" alt="如何使用 reduce() 計算陣列中每個專案的折扣？" >
<div >
<h2 >By Parra ремень</h2>
<p >Цвет: Мульти</p>
<p >Размер: S</p>
<p >Количество: 1</p>
</div>
<div >
<p ><span >8550</span> руб.</p>
</div>
</article>
<article >
<img src="https://code.s3.yandex.net/web-code/entrance-test/board.png" alt="如何使用 reduce() 計算陣列中每個專案的折扣？" >
<div >
<h2 >Fucking Awesome Drawings 2 Pink доска</h2>
<p >Цвет: Розовый флюросентный</p>
<p >Размер: Один размер</p>
<p >Количество: 1</p>
</div>
<div >
<p ><span >4790</span> руб.</p>
</div>
</article>
</section>
<section >
<button >Использовать купон на 15%</button>
<div >
<h2 >Итого:</h2>
<p ><span >46910</span> руб.</p>
</div>
</section>
<script src="./task.js"></script>
</body>
</html>
uj5u.com熱心網友回復：
使用 遍歷價格專案陣列時reduce，您已經在訪問每個專案元素并計算每個專案的折扣價。所以在更新reduce累加器之前更新專案值。
更新每個專案并添加到總數：
// CHANGE:
// let totalValue = items.reduce((acc, cur) => acc (1 - (numDiscount / 100)) * cur.innerText, 0);
// TO:
let totalValue = items.reduce((acc, cur) => {
let itemdisc = (1 - (numDiscount / 100)) * cur.innerText; // calculate item discount
cur.innerText = itemdisc; // update item
return acc itemdisc; // update total
}, 0);
并防止再次應用折扣：
document.querySelector('.total__button').disabled = true;
更新腳本：
function getDomNodesBySelector(selector) {
return Array.from(document.querySelectorAll(selector));
}
document.querySelector('.total__button').addEventListener('click', applyDiscount);
function applyDiscount() {
let items = getDomNodesBySelector(".price-value");
let numDiscount = 15;
let totalValue = items.reduce((acc, cur) => {
let itemdisc = (1 - (numDiscount / 100)) * cur.innerText; // calculate item discount
cur.innerText = itemdisc; // update item
return acc itemdisc; // update total
}, 0);
document.querySelector(".total-price-value").innerText = totalValue;
// prevent discount from being applied more than once
document.querySelector('.total__button').disabled = true;
}
uj5u.com熱心網友回復：
就像是
function getSingleValue(){
var single = document.querySelector('.price-value').textContent;
return single;
}
console.log(getSingleValue())
應該給你一個陣列，其中包含 html 中的各個價格，然后你就可以使用它了
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/481220.html
標籤：javascript 数组
上一篇：生成非重復整數陣列
下一篇：Sumif的陣列引數問題