时间戳

首页 > 解决方案 > 无法让我的 JS 函数在多个产品上执行

javascript - 无法让我的 JS 函数在多个产品上执行

问题描述

我是 Javascript 的新手。

你可以看到按钮。我想在顶部打开一个“窗口”。适用于产品 1（辣椒油）。这是一种时间线，用户在其中悬停（查看商品标题/价格），向下点击（黑色小边框），然后鼠标向上（显示窗口）。

我试图弄清楚为什么它在产品 2 上不起作用。该功能首先是用它们的 ID 调用按钮/div。我将实际按钮更改为调用类 .btn，并将 div 保留为 id zoom。

最终，我想打开您从产品 1 点击看到的 div，并用存储在 javascript 对象中的项目描述填充它，具体取决于单击的项目。如果我们最终在网站上拥有 100 多种产品，我认为这是最有效的方法，但我相信可能会有更好的方法（有什么建议吗？）。

HTML

            <div class="liqueursContainer">
            <!--Product 1-->
            <div class="product" style="border-bottom: 0px;">
                <div class="overlay">
                    <img src="images/chillioil.jpg" class="image" alt="Chili Oil">
                    <div class="middle">
                        <div><p class="abt-product-desc-sm" id="pr-desc-clk1">
                            <a onmousedown="prMouseDown()" onmouseup="prMouseUp()" id="product-zoom" class="btn btn-default">Chili&nbsp;Oil<br>35cl<br>
                            £8.99</a>
                        </p></div>
                    </div>
                </div>
                <a class="add-cart cart1" href="#"><p class="cart-but-txt">Add to Cart</p></a>
            </div>
            <!--Product 2-->
            <div class="product" style="border-bottom: 0px;">
                <div class="overlay">
                    <img src="images/raspratafia.jpg" class="image" alt="Raspberry Ratafia">
                    <div class="middle">
                        <div><p class="abt-product-desc-sm" id="pr-desc-clk2" style="left: -55px; top: -78px;">
                            <a onmousedown="prMouseDown()" onmouseup="prMouseUp()" id="product-zoom" class="btn btn-default" style="width: 100%; height: 100%; background-color: rgb(78, 78, 78); color: white">Raspberry<br>Ratafia<br>50cl<br>
                            £15.99</a>
                        </p></div>
                    </div>
                </div>
                <a class="add-cart cart2" href="#"><p class="cart-but-txt">Add to Cart</p></a>
            </div>
         </div>

        <div id="zoom" class="container d-none"> 
            <p></p>
        </div>

CSS

    .middle {
transition: .5s ease;
position: absolute;
top: 50%;
left: 50%;
text-align: center;
opacity: 0;
margin-bottom: 150px;
}
.product {
width: 45%;
display: flex;
justify-content: space-around;
text-align: right;
align-items: center;
border-bottom: 2px solid #660000;
display: flex;
}
.product {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.liqueursContainer {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 25px;
}
#product-zoom {
background-color: azure;
font-weight: bold;
line-height: 1.5;
font-size: 17px;
color: black;
height: 85px;
top: -150px;
opacity: 0.5;
}
.abt-product-desc-sm {
position: relative;
top: -70px;
left: -50px;
color: rgb(133, 133, 133);
font-weight: 550;
font-size: 20px;
text-align: center;
cursor: pointer;
}
#zoom {
position: relative; 
width: 75%;
background-color: white;
margin: 0 auto;
height: 500px;
top: -700px;
border-radius: 15px;
border: 1px solid black;
}

Javascript

                const button = document.querySelector('.btn');           // This is the main script to view the div

            button.addEventListener('click', function() {                  
                const zoom = document.getElementById('zoom');
                
                if (zoom.classList.contains('d-none')) {             // Using a bootstrap operation to hide/show div with 'd-none' class
                    zoom.classList.remove('d-none');
                    
                } else {
                    zoom.classList.add('d-none');     
                }
                                
            });

            function prMouseDown() {
                document.getElementById("pr-desc-clk1").style.border = "1px solid black";     //This is an attempt to get the black border around each products click
                document.getElementById("pr-desc-clk1").style.borderRadius = "3px";           // But I haven't yet worked out how to do this from a couple of lines (using a class did not seem to work)
                 
                document.getElementById("pr-desc-clk2").style.border = "1px solid black";
                document.getElementById("pr-desc-clk2").style.borderRadius = "3px";
                document.getElementById("pr-desc-clk2").style.left = "-56px";

标签： javascripthtmldombootstrap-4

解决方案

因为，document.querySelector只会返回第一个元素。所以该事件将只绑定第一个。

您应该使用document.querySelectorAll来获取多个元素。它将返回Array nodes[]，然后必须迭代数组以处理单个节点。

const buttons = document.querySelectorAll('.btn');
  
  for(let i = 0; i < buttons.length; i++){
    buttons[i].addEventListener('click', function() {                  
        const zoom = document.getElementById('zoom');
                
        if (zoom.classList.contains('d-none')) {
            zoom.classList.remove('d-none');
        } else {
            zoom.classList.add('d-none');     
        }
                                
    });
  }

推荐阅读