对每个具有特定类的元素执行一个函数(仅限.js)

作为初学者，我在逻辑上有问题。

我有这个html的id，我不允许改变，所以我将无法与唯一的id像infoPrice1,infoPrice2…我要做的是验证产品是否有促销活动，并创建一个已经在其他情况下使用的类的标志。我通过验证priceFrom id是否存在来检查促销案例(它只在这种情况下存在)。然后我对这些值进行处理，以了解折扣百分比，然后在HTML中写入该值。

我终于找到了一种方法，通过使用getElementsByClassName来创建一个具有类产品的元素列表(当我给出console.log[I]来检查元素时，它可以工作)，但是当我传递我创建的函数来进行计算并插入元素时，它似乎只运行在第一个元素上。

我希望它在每个元素中使用类"product"运行函数。验证它是否有促销信息，计算创建html元素的方法，如果有促销信息就把元素放进去(注意，当id priceFrom不存在于productdiv中时，它可能没有)

在完整代码下面加上注释，以便更好地理解:

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>

write()函数需要使用其形参来访问该产品中的元素。

它可以使用querySelector()来选择在productdiv中有一个类的元素。

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" 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]);
}
//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>

相关内容

最新更新

热门标签：