主页 / 问题 / 1593645
Accepted
alexWithoutBeard
Asked:2024-09-12 17:43:54 +0000 UTC2024-09-12 17:43:54 +0000 UTC

如何选择几种产品，以便将它们的总成本写在一个段落中

  • 772

需要创建一个div，其中包含产品的价格及其名称，这样当您点击某个div时，其价格会反映在段落中，而当选择多个div时，总金额会写入段落中

到目前为止，我的头脑只够做到这一点： 

  
  let p = document.querySelector("p");
  let arr = [];
  let divs = document.querySelectorAll("div");
  for (const div of divs) {
    div.addEventListener("click", function () {
      if (div.click) arr.push(div.textContent);
      p.innerHTML = "Итого:" + arr ;
    });
  }
 
  <div>Яблоки: 200</div>
<div>Вишни: 300</div>
<div>Груши: 250</div>
<p></p>

我会立即指出，作业的文本没有解释以什么格式在 html 中创建和排列 div，即可以以对您来说方便且合乎逻辑的方式进行。我目前正在尝试从 div 创建对象并从中获取价格的选项。还有一些想法，但一般都处于思考阶段。

javascript

2 个回答

  1. Best Answer

    我补充一下，你可以data-price在html中添加属性，这样通过价格会更方便getAttribute

    <div class="product" data-price="200">Яблоки: 200</div>

    总的来说，我可以使用set，它不允许重复的元素，我在单击元素是否被选中时检查，另外用颜色突出显示它，但我将保留这部分注释以使其简单可能的

    //todo если "вернул/передумал", предусмотреть, если ввел 0 к примеру, чтоб отнимать из итого(?)
//todo если захотел купить 100гр, добавить аттрибут data-unit="кг"...

let p = document.querySelector("p");
let total = 0; //итоговая сумма
let selectedDivs = new Set(); //множество, чтоб наши дивы хранить  

let divs = document.querySelectorAll(".product");
for (const div of divs) {
  div.addEventListener("click", function() {
    let price = parseInt(div.getAttribute('data-price')); //берем цену
    if (isNaN(price)) return; //если вдруг аттрибут пуст 

    //предусмотрим случай больше кг
    let quantity = parseInt(prompt("Введите количество:", 1)); //по умолчанию 1 поставлю
    if (isNaN(quantity) || quantity <= 0) return; //проверка
    let totalForProduct = price * quantity; //стоимость продукта за выбранное количество
    total += totalForProduct; //добавляем стоимость выбранного количества к итоговой сумме
    /* раскоментировать, чтоб использовать "массив/коллекцию Set"
    if (!selectedDivs.has(div)) {
      selectedDivs.add(div); //если продукт еще не был выбран, добавляем его в Set
      div.style.backgroundColor = "#d3f8d3"; //можно выделить цветом
    }
    */
    p.innerHTML = "Итого: " + total; //итого
  });
}
    <div class="product" data-price="200">Яблоки: 200</div>
<div class="product" data-price="300">Вишни: 300</div>
<div class="product" data-price="250">Груши: 250</div>
<p>Итого: 0</p>

    • 1

  2. 我完成了我的版本，结果是这样的：

       let p = document.querySelector("p");
  let arr = [];
  let arr2 = [];
  let divs = document.querySelectorAll("div");
  for (const div of divs) {
    div.addEventListener("click", function () {
      arr.push(Number(div.textContent.split(" ").slice(-1)));
      arr2.push(div.textContent.split(","));
      p.innerHTML = `
      Итого: <br/>
      <b>Выбранные Продукты</b>: ${arr2.reduce(
        (a, b) => a + ", " + b
      )} <br/> 
      <b>Чек</b> : ${arr.reduce((a, b) => a + b)} рублей`;
    });
  }
     <div>Яблоки: 200</div>
 <div>Вишни: 300</div>
 <div>Груши: 250</div>
 <p>Итого:</p>

    似乎一切都是歪的，但出于某种原因我喜欢它）

    • 1

相关问题