[英]How can I access an HTML class that is rendered using Javascript?
I have a carousel of products for my e-commerce website.我的电子商务网站有一个产品轮播。 But I rendered the products into the carousel using JavaScript and now, the carousel doesn't work.
但是我使用 JavaScript 将产品渲染到轮播中,现在轮播不起作用。 what can I do?
我能做些什么? I would drop code snippets down below.
我会把代码片段放在下面。
Here is the HTML这是 HTML
<body>
<p class="logo">shop Cindy</p>
<nav class="navigation">
<!--<div class="categories">
<p class="category">categories</p>
<i class="fa fa-sort-down cart" style="font-size:100px;"></i>
</div> -->
<!-------------links for laptop nav bar-------------->
<ul class="unordered">
<li><a href="#">Women</a></li>
<li><a href="#">Jeans</a></li>
<li><a href="#">Kids</a></li>
</ul>
</nav>
<div class="cart-number">
<i style="font-size: 40px" class="fa"></i>
<p class="totalItemsInCart">
0
</p>
</div>
<!--------------big changing images starts here------->
<div class="bigpic">
<a class="bigpic-a" href="#">
<p class="bigpic-p">shop new arrivals</p>
</a>
</div>
<!---------------big changing images ends here--------->
<!---------------------category for hover dropdown-------->
<div class="categories2">
<div class="join">
<p class="category2">shop categories</p>
<i class="fa fa-sort-down diff" style="font-size:24px;"></i>
</div>
<ul class="min-cart">
<li><a href="#">Women</a></li>
<li><a href="#">Jeans</a></li>
<li><a href="#">Kids</a></li>
</ul>
</div>
<!----------carousel1 for category 1: hot new-------------------->
<main>
<h1>new arrivals jbkj</h1>
<span>‹</span>
<span>›</span>
<section>
<!---------------------render images here hopefully------------>
</section>
</main>
<!------------------category 1 ends here-------------------->
<!----------carousel for category 2------------------------>
<main>
<h1>new arrivals</h1>
<span>‹</span>
<span>›</span>
<section class="section">
<!---------------------render images here hopefully------------>
</section>
</main>
<!----------------category 2 ends here------------------------->
<!--------------big changing jeans images starts here------->
<div class="bigpic">
<a class="bigpic-a" href="#">
<p class="bigpic-p">shop new arrivals</p>
</a>
</div>
<!---------------big changing jeans images ends here--------->
<!----------carousel for category 3------------------------>
<main>
<h1>new arrivals</h1>
<span>‹</span>
<span>›</span>
<section class="section1">
<!---------------------render images here hopefully------------>
</section>
</main>
<!-----------------------category 3 ends here-->
<!--------------big changing jeans images starts here------->
<div class="bigpic">
<a class="bigpic-a" href="#">
<p class="bigpic-p">shop new arrivals</p>
</a>
</div>
<!---------------big changing jeans images ends here--------->
<!----------carousel for category 4------------------------>
<main>
<h1>new arrivals</h1>
<span>‹</span>
<span>›</span>
<section class="section2">
<!---------------------render images here hopefully------------>
</section>
</main>
<script src="product.js"></script>
<script src="collections.js"></script>
</body>
Here is the javaScript for the carousel这是旋转木马的 javaScript
var span = document.getElementsByTagName("span");
var carouselProducts= document.getElementsByClassName(".products");
var l = 0;
span[1].onclick = ()=>{
l++;
for(var i of carouselProducts) {
if (l==0) {i.style.left = "0px";}
if (l==1) {i.style.left = "-480px";} //-740
if (l==2) {i.style.left = "-960px";} //-1480
if (l==3) {i.style.left = "-1440px";} //-2220
if (l==4) {i.style.left = "-1920px";} //3500
if (l>4) {l=4;}
}
}
span[0].onclick = ()=>{
l--;
for(var i of carouselProducts) {
if (l==0) {i.style.left = "0px";}
if (l==1) {i.style.left = "-480px";}
if (l==2) {i.style.left = "-960px";}
if (l==3) {i.style.left = "-1440px";}
if (l<0) {l=0;}
}
}
And finally, here is the javaScript for the rendered products.最后,这里是渲染产品的 javaScript。 how do I access the ".product" class from this code in the carousel code?
如何从轮播代码中的此代码访问“.product”class?
function renderProducts() {
productsNew.forEach((product) => {
if (product.category === "first") {
productEl.innerHTML += `
<div class="product">
<picture>
<img src= "${product.imgsrc}" alt="where my image at?">
</picture>
<div class="details">
<p>
<b>${product.name}</b>
<small>New Arrival</small>
</p>
<samp>${product.price}</samp>
</div>
<button class="cart-btn" onclick="addToCart(${product.id})">
<p>
Add-cart
</p>
</button>
</div>
`
} else if (product.category === "section1") {
SectionEl.innerHTML += `
<div class="product">
<picture>
<img src= "${product.imgsrc}" alt="where my image at?">
</picture>
<div class="details">
<p>
<b>${product.name}</b>
<small>New Arrival</small>
</p>
<samp>${product.price}</samp>
</div>
<button class="cart-btn" onclick="addToCart(${product.id})">
<p>
Add-cart
</p>
</button>
</div>
`
} else if (product.category === "section2") {
Section1El.innerHTML += `
<div class="product">
<picture>
<img src= "${product.imgsrc}" alt="where my image at?">
</picture>
<div class="details">
<p>
<b>${product.name}</b>
<small>New Arrival</small>
</p>
<samp>${product.price}</samp>
</div>
<button class="cart-btn" onclick="addToCart(${product.id})">
<p>
Add-cart
</p>
</button>
</div>
`
} else {
Section2El.innerHTML += `
<div class="product">
<picture>
<img src= "${product.imgsrc}" alt="where my image at?">
</picture>
<div class="details">
<p>
<b>${product.name}</b>
<small>New Arrival</small>
</p>
<samp>${product.price}</samp>
</div>
<button class="cart-btn" onclick="addToCart(${product.id})">
<p>
Add-cart
</p>
</button>
</div>
`
}
});
}
renderProducts();
Thank you.谢谢你。
you can use: HTML DOM getElementsByClassName() Method你可以使用: HTML DOM getElementsByClassName() 方法
document.getElementsByClassName("product");
For More Infos check w3schools HTML DOM getElementsByClassName() Method有关更多信息,请查看w3schools HTML DOM getElementsByClassName() 方法
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.