Блог

Я новичок в Javascript.

Вы можете увидеть кнопку. Я хочу открыть «окно» поверх. Работает для продукта 1 (масло чили). Это своего рода временная шкала, на которой пользователь наводит курсор (см. Заголовок / Цену товара), нажимает вниз (маленькая черная рамка), затем наводит курсор мыши (который отображает окно).

Я пытаюсь выяснить, почему это не работает на продукте 2. Функция была в первом экземпляре, вызывая button / divs с их идентификаторами. Я изменил фактическую кнопку на вызов class .btn и оставил div в качестве id zoom .

В конце концов я хочу открыть div, который вы видите, щелкнув product 1, и заполнить его описанием элемента, хранящимся в объекте 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">Chiliamp;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";
       
  

Потому что, 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');     
        }
                                
    });
  }