减少物品JS

Question

我是 JS 的新手，正在为购物车案例而苦苦挣扎。我使用 LocalStorage 来存储产品，一切顺利。

但是当我尝试通过购物车中的按钮减少产品时，第一个产品从页面中逐个删除减少计数点，但之后无法使用其他产品减少按钮。

但是，如果开始减少购物车底部的商品，一切都会顺利。我怎样才能解决这个问题？感谢大家！

我意识到，eksiButtons 值返回的是nodeList，并且它的所有按钮索引号都是从0 开始的，即使其中一个从页面nodeList 中删除，按钮仍然保留在里面。但如果刷新页面节点列表会自行更新负长度。

代码如下

const veri = localStorage.getItem("urunler") // Localden ürünleri çekiyor
let urunler = JSON.parse(veri) // Çekilen ürünleri urunler diye bir değişkene dizi olarak kaydediyor.

const wrapper = document.querySelector(".wrapper") // Sepet Alanını Seçiyor

let itemCount = document.querySelector(".item-count")  // Sepet logoyu seçiyor
let totalPrice = document.getElementById("total-fiyat")

sayiArttir()


for(i of urunler){

    let div = document.createElement('div')
    div.classList.add("row")
    div.innerHTML = 
    `  
        <div class="inner-card  p-4 bg-light rounded border border-secondary g-2">
                        
            <ul class="d-flex justify-content-between align-items-center list-unstyled">
                <li>
                    <div class="foto-cerceve">
                            <img src="../img/t1.avif">
                    </div>
                </li>

                <li>${i.baslik}</li>

                <li class="d-flex justify-content-between align-items-center gap-3">
                
                    <button class="btn btn-secondary btn-sm rounded-pill eksi"">
                        <span class=" text-white rounded-pill align-items-center d-flex justify-content-center align-items-center">-</span> 
                    </button>
                    
                
                <span class="text-warning fs-5"> x<span class="sayi">${i.adet}</span> </span> 
                
                <div class="btn btn-secondary btn-sm rounded-pill arti">
                    <span class=" text-white rounded-pill align-items-center d-flex justify-content-center align-items-center" >+</span> 
                </div>
                
                </li>

                <li>${((i.fiyat)*(i.adet))} TL</li>

                <li class="btn btn-danger btn-md sil">Sil</li>
            </ul>
        </div> 
        </div>

    `
    wrapper.append(div)

    if(i.adet <= 0){
        div.innerHTML = " "
    }
}
// Eksi butonlarını seçmek için bir döngü oluştur

let eksiButtons = document.querySelectorAll('.eksi');

// let eksiBela = Array.from(eksiButtons)
const sayi = document.querySelectorAll('.sayi');
const row = document.querySelectorAll('.row');

eksiButtons.forEach((i, index)=>{
    i.addEventListener("click", function(){
        
        
       
        console.log()


        if((index < urunler.length) && (urunler[index].baslik === i.parentElement.parentElement.children[1].textContent)){
                urunler[index].adet--
                
                if(urunler[index].adet <= 0 )
                {
                   urunler.splice(index, 1);
                    
                }
        
                sayi[index].textContent--
                
                if(sayi[index].textContent <= 0)
                {  
                    row[index].remove();

                }

                
        }  

        localStorage.setItem("urunler", JSON.stringify(urunler))
        sayiArttir()
    })
})

Answer 1

您能更详细地描述一下您的问题吗？也许这次提供一个包含 HTML 和 JavaScript 的代码示例，这样我，包括其他听到你的问题的人都可以完全理解这个问题。它不一定是您的实际网站，只需用测试容器替换类，以便我们可以看到问题。谢谢。