我需要计算数组中每个项目和总数的15%折扣。
目前我有计算和显示所有项目的总折扣与减少()方法的解决方案，但我如何使用减少()分别计算每个项目的折扣?有办法做到这一点，还是我应该使用不同的解决方案?
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 class="page">
<h1 class="page__title">Корзина</h1>
<section class="chosen-items">
<article class="card">
<img src="https://code.s3.yandex.net/web-code/entrance-test/jacket.png" alt="" class="card__image">
<div class="card__description">
<h2 class="card__title">Have A Good Time x FA Two Tone куртка</h2>
<p class="card__text">Цвет: Зеленый/Оранжевый</p>
<p class="card__text">Размер: M</p>
<p class="card__text">Количество: 1</p>
</div>
<div class="card__price">
<p class="card__rub price-default"><span class="price-value">15890</span> руб.</p>
</div>
</article>
<article class="card">
<img src="https://code.s3.yandex.net/web-code/entrance-test/vans.png" alt="" class="card__image">
<div class="card__description">
<h2 class="card__title">Vans Old Skool кеды</h2>
<p class="card__text">Цвет: Черный/Белый</p>
<p class="card__text">Размер: 43</p>
<p class="card__text">Количество: 1</p>
</div>
<div class="card__price">
<p class="card__rub price-default"><span class="price-value">6390</span> руб.</p>
</div>
</article>
<article class="card">
<img src="https://code.s3.yandex.net/web-code/entrance-test/pop-DRS.png" alt="" class="card__image">
<div class="card__description">
<h2 class="card__title">Pop DRS Denim Stonewashed джинсы</h2>
<p class="card__text">Цвет: Голубой</p>
<p class="card__text">Размер: S</p>
<p class="card__text">Количество: 1</p>
</div>
<div class="card__price">
<p class="card__rub price-default"><span class="price-value">11290</span> руб.</p>
</div>
</article>
<article class="card">
<img src="https://code.s3.yandex.net/web-code/entrance-test/by-parra.png" alt="" class="card__image">
<div class="card__description">
<h2 class="card__title">By Parra ремень</h2>
<p class="card__text">Цвет: Мульти</p>
<p class="card__text">Размер: S</p>
<p class="card__text">Количество: 1</p>
</div>
<div class="card__price">
<p class="card__rub price-default"><span class="price-value">8550</span> руб.</p>
</div>
</article>
<article class="card">
<img src="https://code.s3.yandex.net/web-code/entrance-test/board.png" alt="" class="card__image">
<div class="card__description">
<h2 class="card__title">Fucking Awesome Drawings 2 Pink доска</h2>
<p class="card__text">Цвет: Розовый флюросентный</p>
<p class="card__text">Размер: Один размер</p>
<p class="card__text">Количество: 1</p>
</div>
<div class="card__price">
<p class="card__rub price-default"><span class="price-value">4790</span> руб.</p>
</div>
</article>
</section>
<section class="total page__total">
<button class="total__button">Использовать купон на 15%</button>
<div class="total__prices">
<h2 class="total__title">Итого:</h2>
<p class="total__rub price-default"><span class="total-price-value">46910</span> руб.</p>
</div>
</section>
<script src="./task.js"></script>
</body>
</html>
在使用reduce循环遍历price items数组时，您已经访问了每个item元素并计算了每个item的折扣价格。因此，在更新reduce累加器之前，先更新项目值。
更新每项并添加到total:
// 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;
}
类似
function getSingleValue(){
var single = document.querySelector('.price-value').textContent;
return single;
}
console.log(getSingleValue())
应该为您提供一个数组，其中包含HTML中的各个价格，然后您将能够使用