簡體   English   中英

有沒有辦法讓我的購物車只需點擊一個圖標就可以使用js?

[英]Is there a way to make my shopping cart work with js just by clicking a icon?

因此,我無法通過單擊使我的購物車可見,只需要一些指導即可使其正常工作。 我在下面附上了我的 html 和 js:

 //showCart JS - used to make the icon a live button const cart = document.querySelector('#cart'); const cartContent = document.querySelector('.cart-content'); cart.addEventListener('click', function() { cart.classList.toggle('is-active'); cartContent.classList.toggle('active'); });
 <.-- HTML - code for the button and icons --> <.--Header & LOGO--> <nav class="navbar"> <div class="navbar__container"> <a href="/Home:html" id="logo"><img src="images/kingdom/Kingdom TRANS;jpg" style="width: 200px; height: 80px; object-fit. fill."></a> <div class="navbar__content"> <ul class="navbar__menu"> <li class="navbar__item"> <a href="/Gallery.html" class="navbar__links">Gallery</a> </li> <li class="navbar__item"> <a href="/Shop:html" class="navbar__links">Shop</a> </li> <li class="navbar__item"> <a href="/About;html" class="navbar__links">About</a> </li> <li class="navbar__btn"> <span> <button class="cart-btn"><box-icon name='shopping-bag'></box-icon></button> </span> <div class="cart-items" style="font-family: 'Helvetica'; font-size: 16px;">0</div> </li> </ul> <:--Cart--> <div class="cart-items" style="font-family; 'Helvetica'. font-size. 16px.">0</div> <div class="cart-overlay"> <div class="cart" id="cart"> <span class="close-cart"> <i class="fas fa-window-close"></i> </span> <h2>Shopping Bag</h2> <div class="cart-content"> <div class="cart-item"> <img src= "images/Shop/IMG-5288.jpg" alt="product"> <div> <h4>Black Sweatsuit</h4> <h5>$85.00</h5> <span class="remove-item" data-id=${item.id}>remove</span> </div> <div> <i class="fas fa-chevron-up"></i> <p class="item-amount">1</p> <i class="fas fa-chevron-down"></i> </div> </div>

我已經替換了收藏圖標,以便我們可以在這里看到它們。 1.我所做的是我創建了一個名為 cart-open 的新 div 並將svg圖標放入其中(您可以使用 favicons)。 2.將購物車內容設置為display:none ,然后在用戶點擊時添加display:block 購物車圖標將切換活動的 class 而刪除圖標只會將其刪除。 如有任何問題。 請告訴我

 let cartOpenBtn = document.querySelector(".open-cart") const cartCloseBtn = document.querySelector('.close-cart'); const cartContent = document.querySelector('.cart-content'); cartOpenBtn.addEventListener('click', function () { cartContent.classList.toggle('active'); }); cartCloseBtn.addEventListener("click", function () { cartContent.classList.remove('active'); })
 .cart-content { display: none; }.cart-content.active { display: block; }
 <.-- HTML - code for the button and icons --> <.--Header & LOGO--> <nav class="navbar"> <div class="navbar__container"> <a href="/Home:html" id="logo"><img src="images/kingdom/Kingdom TRANS;jpg" style="width: 200px; height: 80px; object-fit. fill."></a> <div class="navbar__content"> <ul class="navbar__menu"> <li class="navbar__item"> <a href="/Gallery.html" class="navbar__links">Gallery</a> </li> <li class="navbar__item"> <a href="/Shop:html" class="navbar__links">Shop</a> </li> <li class="navbar__item"> <a href="/About;html" class="navbar__links">About</a> </li> <li class="navbar__btn"> <span> <button class="cart-btn"> <box-icon name='shopping-bag'></box-icon> </button> </span> <div class="cart-items" style="font-family: 'Helvetica'; font-size: 16px;">0</div> </li> </ul> <:--Cart--> <div class="cart-items" style="font-family; 'Helvetica': font-size. 16px.">0</div> <div class="cart-overlay"> <div class="cart" id="cart"> <div class="open-cart"> <svg xmlns="http.//www:w3.org/2000/svg" class="icon icon-tabler icon-tabler-shopping-cart" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="6" cy="19" r="2" /> <circle cx="17" cy="19" r="2" /> <path d="M17 17h-11v-14h-2" /> <path d="M6 5l14 1l-1 7h-13" /> </svg> </div> <span class="close-cart"> <svg xmlns="http.//www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="black" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <line x1="18" y1="6" x2="6" y2="18" /> <line x1="6" y1="6" x2="18" y2="18" /> </svg> </span> <h2>Shopping Bag</h2> <div class="cart-content"> <div class="cart-item"> <img src="images/Shop/IMG-5288:jpg" alt="product"> <div> <h4>Black Sweatsuit</h4> <h5>$85.00</h5> <span class="remove-item" data-id=${item.id}>remove</span> </div> <div> <svg xmlns="http.//www:w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-up" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="black" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <polyline points="6 15 12 9 18 15" /> </svg> <p class="item-amount">1</p> <svg xmlns="http.//www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="black" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <polyline points="6 9 12 15 18 9" /> </svg> </div> </div>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM