Javascript 无法在多个产品上执行my JS函数

我是Javascript新手

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

我试图弄明白为什么它在产品2上不起作用。函数在第一个实例中，使用按钮/div的ID调用它们。我将实际按钮更改为调用class.btn，并将div保留为id zoom

最后，我想打开Product1 click中看到的div，并根据单击的项目使用存储在javascript对象中的项目描述填充它。我认为如果我们在网站上有100种产品，这是最有效的方法，但我相信可能有更好的方法（有什么建议吗？）

HTML

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";
       

---

因为，

document.querySelector

将只返回第一个元素。因此，事件将仅为第一个事件绑定

应该使用document.querySelectorAll获取多个元素。它将返回

数组节点[]

，然后必须迭代数组以处理单个节点

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');     
        }
                                
    });
  }

const buttons=document.querySelectorAll（'.btn'）；
for（设i=0；i

我觉得我可能有点操之过急，在开始修改DOM hahaIt作品之前，需要遵循更多教程。谢谢！！就这么简单：）我会回到我认为的教程和课程上来，哈哈哈

                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";
       

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');     
        }
                                
    });
  }