如何在没有js框架的情况下将产品添加到购物车

Question

我是初级开发人员，我制作了电子商务网站（使用 html css 和 JavaScript（无框架）

我坚持在购物车上添加产品因为 JavaScript 和这些我的代码：HTML：

<div class="small-container">
    <div class="row">
    <div class="col-4">
    <img src="images/20 ps4.png" alt=""/></a>
    <h4>20 Playstation Store(PSN)</h4>
    <p>$20.00</p>
    <button type="button" class="btn1" ><h3 class="text-btn">add to cart</h3></button>
    </div>

    <!--2-->
    <div class="col-4">
    <img src="images/25 ps4.png" alt="" />
    <h4>25 Playstation Store(PSN)</h4>
    <p>$25.00</p>
    <button type="button" class="btn1" onclick="window.location.href='cart.html'"><h3 class="text-btn">add to cart</h3></button>
    </div>

JavaScript：

function ready() {
    var removeCartItemButtons = document.getElementsByClassName('btn1')
    for (var i = 0; i < removeCartItemButtons.length; i++) {
        var button = removeCartItemButtons[i]
        button.addEventListener('click', removeCartItem)
    }

    var quantityInputs = document.getElementsByClassName('btn1')
    for (var i = 0; i < quantityInputs.length; i++) {
        var input = quantityInputs[i]
        input.addEventListener('change', quantityChanged)
    }

    var addToCartButtons = document.getElementsByClassName('btn1')
    for (var i = 0; i < addToCartButtons.length; i++) {
        var button = addToCartButtons[i]
        button.addEventListener('click', addToCartClicked)
    }

    document.getElementsByClassName('btn1')[0].addEventListener('click', purchaseClicked)
}

Css：

.row {
margin-top: 50px;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}

.small-container{
max-width: 1080px;
margin: auto;
padding-left: 25px;
padding-right: 25px;
}

.col-4 {
flex-basis: 25%;
padding: 10px;
min-width: 200px;
margin-bottom: 50px;
transition: transform 0.5s;
}
  
.col-4 img {
width: 100%;
}

非常感谢。

我试图找到 function 将产品项目添加到购物车

我还必须在没有框架的情况下使用 JavaScript

Answer 1

var addToCartButtons = document.getElementsByClassName('btn1') 、 var quantityInputs = document.getElementsByClassName('btn1')和var removeCartItemButtons = document.getElementsByClassName('btn1')什么？ 查询是相同的，因此将始终返回相同的元素。

您的方法很好，只需将正确的类添加到您的元素和查询中即可。 一定要让HTML结构统一。 例如，关于您的卡的元数据可以存储在 localStorage 中。 您可以在此处了解如何使用 localStorage。 顺便说一句，您可以使用更新的语法，如forof循环或const关键字，使您的代码更具可读性。

 (() => { const addToCardButtons = document.querySelectorAll('.btn--add_to_cart'); for (const btn of addToCardButtons) { const identifier = btn.dataset.target; btn.addEventListener('click', () => addToCart(identifier)) } const addToCart = (id) => { console.log(id); // handle 'add to cart' functionality } // other functionalities can follow the same structure })()

 <div class="small-container"> <div class="row"> <div class="col-4"> <img src="images/20 ps4.png" alt="" /></a> <h4>20 Playstation Store(PSN)</h4> <p>$20.00</p> <button type="button" data-target="1" class="btn btn--add_to_cart">add to cart</button> </div> <.--2--> <div class="col-4"> <img src="images/25 ps4.png" alt="" /> <h4>25 Playstation Store(PSN)</h4> <p>$25.00</p> <button type="button" data-target="2" class="btn btn--add_to_cart">add to cart</button> </div>