對具有特定類的每個元素執行一個函式（僅限.js）-有解無憂

作為初學者，我遇到了邏輯問題。

我有這個 html，其 id 不允許更改，因此我將無法使用諸如 infoPrice1、infoPrice2 之類的唯一 id ... 我要做的是驗證產品是否有促銷和使用已在其他情況下使用的類創建一個標志。我通過驗證 priceFrom id 是否存在來檢查促銷案例（它只會在這種情況下存在）。然后我處理這些值以了解折扣百分比，然后將值寫入 HTML。

我終于找到了一種方法，通過使用 getElementsByClassName 來創建一個包含具有類產品的元素的串列（當我給一個 console.log[i] 來檢查元素時有效），但是當我傳遞我創建的函式時計算并插入元素，它似乎只在第一個元素上運行。

我希望它使用“產品”類在每個元素中運行該函式。驗證它是否有促銷，進行數學運算以創建 html 元素并將元素放入是否有促銷（請注意，當產品 div 中不存在 id priceFrom 時，它可能不存在）

在帶有注釋 js 的完整代碼下方，以便更好地理解：

function write() {
  var infoPrice = document.getElementById("infoPrice");
  var temPromocao = infoPrice.querySelector("#priceFrom");

  if (temPromocao !== null) {
    //check if element with id priceFrom exists
    var valorDe = document.getElementById("priceFrom").innerText.replace("R$ ", "");
    var valorPor = document.getElementById("bestPrice").innerText.replace("R$ ", "");
    //get values like R$00,00 and returns only  00,00
    var valorIntDe = Number.parseFloat(valorDe.replace(",", "."));
    var valorIntPor = Number.parseFloat(valorPor.replace(",", "."));
    //turns values in number so i can make the calcs = 00.00
    var desconto = Math.round(((valorIntDe - valorIntPor) / valorIntDe) * 100);
    //percentage calculation
    var recebeP = document.getElementById("flagArea");
    recebeP.innerHTML = "<p id='flagBox' class='flag'>-"   (desconto)  "%</p>";
    //create element in html
  };
}

document.addEventListener("DOMContentLoaded", function(a) {
  var products = document.getElementsByClassName("product");

  for (var i = 0; i < products.length; i  ) {
    write(products[i]);
    console.log(products[i].innerHTML)
  }
  //My idea was that this would apply the function on each element with the product class
});

.product {
  border: 1px solid #e41021;
  width: 200px;
  padding: 20px;
}

.fac-product__content__info__price__from {
  display: flex;
  gap: 5px;
}

.flag-area p {
  background-color: #e41021;
  color: #FFFFFF;
  font-weight: 600;
  font-family: sans-serif;
  width: fit-content;
  padding: 5px 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>fac-vtex-cms-auto-flag</title>
  <link rel="stylesheet" href="/styles/style.css" />
</head>

<body>
  <div class="product">
    <div class="flag-area" id="flagArea">
      <p></p>
    </div>
    <div id="infoPrice" class="fac-product__content__info__price">
      <p>Product 1</p>
      <span class="fac-product__content__info__price__from">
          <p class="fac-product__content__info__price__from__txt">Old price:</p>
          <p
            id="priceFrom"
            class="fac-product__content__info__price__from__price"
          >
            R$ 149,00
          </p>
          <p class="fac-product__content__info__price__from__txt">Sale:</p>
        </span>
      <span id="bestPrice" class="fac-product__content__info__price__sale-price">R$ 50,00</span
        >
        <em class="fac-product__content__info__price__installment">
          <em>in cash</em>
        </em>
      </div>
    </div>
    <div class="product">
      <div class="flag-area" id="flagArea"></div>
      <p>Product 2</p>
      <div id="infoPrice" class="fac-product__content__info__price">
        <span class="fac-product__content__info__price__from">
          <p class="fac-product__content__info__price__from__txt">Old price:</p>
          <p
            id="priceFrom"
            class="fac-product__content__info__price__from__price"
          >
            R$ 10,00
          </p>
          <p class="fac-product__content__info__price__from__txt">Sale:</p>
        </span>
      <span id="bestPrice" class="fac-product__content__info__price__sale-price">R$ 5,00</span
        >
        <em class="fac-product__content__info__price__installment">
          <em>in cash</em>
        </em>
      </div>
    </div>
    <script type="text/javascript" src="/js/script.js"></script>
  </body>
</html>

uj5u.com熱心網友回復：

該write()函式需要使用其引數來訪問該產品中的元素。

它可以querySelector()用來選擇產品 div 中具有類的元素。

function write(product) {
  var infoPrice = product.querySelector(".fac-product__content__info__price");
  var temPromocao = infoPrice.querySelector(".fac-product__content__info__price__from__price");

  if (temPromocao !== null) {
    var valorDe = temPromocao.innerText.replace("R$ ", "");
    var valorPor = infoPrice.querySelector(".fac-product__content__info__price__sale-price").innerText.replace("R$ ", "");
    //get values like R$00,00 and returns only  00,00
    var valorIntDe = Number.parseFloat(valorDe.replace(",", "."));
    var valorIntPor = Number.parseFloat(valorPor.replace(",", "."));
    //turns values in number so i can make the calcs = 00.00
    var desconto = Math.round(((valorIntDe - valorIntPor) / valorIntDe) * 100);
    //percentage calculation
    var recebeP = product.querySelector(".flag-area");
    recebeP.innerHTML = `<p id="flagBox" >-${desconto}%</p>`;
    //create element in html
  };
}

document.addEventListener("DOMContentLoaded", function(a) {
  var products = document.getElementsByClassName("product");

  for (var i = 0; i < products.length; i  ) {
    write(products[i]);
  }
  //My idea was that this would apply the function on each element with the product class
});

.product {
  border: 1px solid #e41021;
  width: 200px;
  padding: 20px;
}

.fac-product__content__info__price__from {
  display: flex;
  gap: 5px;
}

.flag-area p {
  background-color: #e41021;
  color: #FFFFFF;
  font-weight: 600;
  font-family: sans-serif;
  width: fit-content;
  padding: 5px 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>fac-vtex-cms-auto-flag</title>
  <link rel="stylesheet" href="/styles/style.css" />
</head>

<body>

  <div class="product">
    <div class="flag-area" id="flagArea">
      <p></p>
    </div>
    <div id="infoPrice" class="fac-product__content__info__price">
      <p>Product 1</p>
      <span class="fac-product__content__info__price__from">
        <p class="fac-product__content__info__price__from__txt">Old price:</p>
        <p id="priceFrom" class="fac-product__content__info__price__from__price">
          R$ 149,00
        </p>
        <p class="fac-product__content__info__price__from__txt">Sale:</p>
      </span>
      <span id="bestPrice" class="fac-product__content__info__price__sale-price">R$ 50,00</span>
      <em class="fac-product__content__info__price__installment">
        <em>in cash</em>
      </em>
    </div>
  </div>

  <div class="product">
    <div class="flag-area" id="flagArea"></div>
    <p>Product 2</p>
    <div id="infoPrice" class="fac-product__content__info__price">
      <span class="fac-product__content__info__price__from">
          <p class="fac-product__content__info__price__from__txt">Old price:</p>
          <p id="priceFrom" class="fac-product__content__info__price__from__price">
            R$ 10,00
          </p>
          <p class="fac-product__content__info__price__from__txt">Sale:</p>
        </span>
      <span id="bestPrice" class="fac-product__content__info__price__sale-price">R$ 5,00</span>
      <em class="fac-product__content__info__price__installment">
        <em>in cash</em>
      </em>
    </div>
  </div>
  <script type="text/javascript" src="/js/script.js"></script>
</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/495170.html

標籤：javascript for循环

上一篇：過早退出“for”回圈會導致計數不準確

下一篇：你如何在for回圈中參考列的索引？