此功能中的功能不起作用，添加到收藏夹电子商务项目

Question

我需要做的是，当我单击 heartBtn 时，它会变为红色并将项目添加到本地存储 productsInFavArr 中的对象数组中，当我再次单击时，它应该会变为灰色并从 @ 中删除对象987654323@。 添加功能在将项目添加到 arr 部分时运行良好，但drawProductUI 函数应该检查产品是否存在于productsInFacArr 中，btn 将是红色的，如果不是它会是灰色的，所以我把 @ 987654326@function 在添加和删除项目后的添加和删除功能中，但在我重新加载页面之前它不起作用

并且删除功能在两次单击后从arr中删除对象并且仍然不改变btn的colot

所以我的主要问题是在添加或删除项目后更改 btn 的颜色，并且删除功能在两次单击后删除项目

代码如下：

// Draw Product UI
function drawProductUI(array){
var productsUI = array.map((item) => {        
    if (productsInFavArr) {
        for (const favProd of productsInFavArr){
                if (favProd.id === item.id) {
                    // console.log(favProd);
                return `
            <div class="product-item"> 
            <div class="product-img-container">
            <img src=${item.imgURL} alt="products" class="product-img" width="100%" height="150px">
            </div>
            <div class="product-text">
                <h2 class="product-title">${item.title}</h2>
                <span class="product-desc">${item.desc}</span>
                <p class="product-price">USD ${item.price}</p>
            </div>
            <div class="product-btns">
                <button class="add-to-cart">Add To Cart</button>
                <button class="heart-btn heart-icon-red" onclick="removeItemFromFav( ${item.id} )"><i class="far fa-heart"></i></button>
            </div>
            </div>
            `;
            }
    }}
    return`
    <div class="product-item"> 
        <div class="product-img-container">
            <img src=${item.imgURL} alt="products" class="product-img" width="100%" height="150px"> 
        </div>
        <div class="product-text">
            <h2 class="product-title">${item.title}</h2>
            <span class="product-desc">${item.desc}</span>
            <p class="product-price">USD ${item.price}</p>
        </div>
        <div class="product-btns">
            <button class="add-to-cart">Add To Cart</button>
            <button class="heart-btn heart-icon" ><i class="far fa-heart"></i></button>
        </div>
    </div>
    `
});
    productsContainer.innerHTML = productsUI.join("");    
}
drawProductUI(allProducts)


// add to favorites
for(let f=0; f < heartBtn.length; f++){
heartBtn[f].addEventListener("click" ,()=>{
    addToFavorites(allProducts[f]);
    function addToFavorites(product){
        if (localStorage.getItem("userValidate") && localStorage.getItem("passValidate")) {
            let productsInFavObj = localStorage.getItem("productsInFavObj");
            productsInFavObj = JSON.parse(productsInFavObj);
            if(productsInFavObj != null){
                    if(productsInFavObj[product.id] == undefined){
                        productsInFavObj = { 
                            ...productsInFavObj,
                            [product.id] : product
                            }
                        
                    }
            }else{
                productsInFavObj = {
                    [product.id] : product
                }
        }
        let productsInFavArr = Object.values(productsInFavObj)
    
        localStorage.setItem("productsInFavArr" , JSON.stringify(productsInFavArr) )
        localStorage.setItem("productsInFavObj" , JSON.stringify(productsInFavObj) )
    
        }else{
            window.location.href = "login.html";
        }
    
    }
    drawProductUI(allProducts)
}) 
}


// Remove From Favorite
function removeItemFromFav(id){

for(let f=0; f < heartBtn.length; f++){
    let productsInFavArr = localStorage.getItem("productsInFavArr")
    if(productsInFavArr){
        let items = JSON.parse(productsInFavArr);
        console.log("removed item:",allProducts[f]);
        let filteredItems = items.filter((item) => item.id !== id);
        localStorage.setItem("productsInFavArr" , JSON.stringify(filteredItems));        
        localStorage.setItem("productsInFavObj" , JSON.stringify(filteredItems) )
        drawProductUI(allProducts)
        console.log(filteredItems);
        if(filteredItems.length==0){
            localStorage.removeItem("productsInFavArr")
            localStorage.removeItem("productsInFavObj")
        }
    }
}
}

这里是产品示例

let products = [
{
    title: "Sunglasses",
    imgURL: "images/Products/sunglasses.jpg",
    desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nulla adipisci fugiat pariatur recusandae repudiandae fuga molestias doloremque itaque obcaecati.",
    price:80,
    id: 1
},
{
    title: "Laptop",
    imgURL: "images/Products/laptop.jpg",
    desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nulla adipisci fugiat pariatur recusandae repudiandae fuga molestias doloremque itaque obcaecati.",
    price:100,
    id: 2
},
{
    title: "Microphone",
    imgURL: "images/Products/mic.jpg",
    desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nulla adipisci fugiat pariatur recusandae repudiandae fuga molestias doloremque itaque obcaecati.",
    price:75,
    id: 3
},
{
    title: "Cat",
    imgURL: "images/Products/cat.jpg",
    desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nulla adipisci fugiat pariatur recusandae repudiandae fuga molestias doloremque itaque obcaecati.",
    price:200,
    id: 4
},
]

谢谢

Answer 1

在drawProductUI 函数中，您没有读取本地存储值，但它取决于productsInFavArr，它可能只读取本地存储值一次。我认为您需要在调用 drawProductUI 时获取新值，以便在不重新加载页面的情况下反映对本地存储所做的更改。

function drawProductUI(array){
    let productsInFavArr = JSON.parse(localStorage.getItem("productsInFavArr")) || []; // read the value here so it's fresh before redraw happens
    var productsUI = array.map((item) => {
    // rest of the function code

在drawProductUI 函数中，您为所选项目定义处理程序：

<button class="heart-btn heart-icon-red" onclick="removeItemFromFav(${item.id})"> 
   <i class="far fa-heart"></i>
</button>

您应该对未选择的按钮版本执行相同的操作：

<button class="heart-btn heart-icon" onclick="addToFavorites(${item.id})">
    <i class="far fa-heart"></i>
</button>

这样，每次重绘 UI 时都会附加点击处理程序，而不仅仅是在读取 js 文件时附加一次，当您像当前一样定义处理程序时就是这种情况。

有了这个，你需要在顶层定义addToFavorites函数，所以在循环之外，就像你定义removeItemFromFav一样。

由于处理程序现在获取产品的 id，因此您需要在处理之前找到合适的产品。

您还想在单击此按钮时重绘 UI，因此将适当的方法添加到函数底部。

我附上了指示这些变化的 cmets：

function addToFavorites(id){ // this is now defined at the top level as removeItemFromFav
    if (localStorage.getItem("userValidate") && localStorage.getItem("passValidate")) {
        const product = allProducts.find(p => p.id == id); // this and next lines handle product lookup
        if (!product) { return; }
        let productsInFavObj = localStorage.getItem("productsInFavObj");
        productsInFavObj = JSON.parse(productsInFavObj);
        if(productsInFavObj != null){
            if(productsInFavObj[id] == undefined){
                productsInFavObj = { 
                    ...productsInFavObj,
                    [id] : product
                }            
            }
        }else{
            productsInFavObj = {
               [id] : product
            }
        }
        let productsInFavArr = Object.values(productsInFavObj)
        localStorage.setItem("productsInFavArr" , JSON.stringify(productsInFavArr) )
        localStorage.setItem("productsInFavObj" , JSON.stringify(productsInFavObj) )
        drawProductUI(allProducts); // this redraws the UI
    }else{
        window.location.href = "login.html";
    }
}
    

您要更正的最后一件事是removeItemFromFav 函数。 循环是不必要的

function removeItemFromFav(id){
    // loop is gone now, also console.logs are gone
    let productsInFavArr = localStorage.getItem("productsInFavArr")
    if(productsInFavArr){
        let items = JSON.parse(productsInFavArr);
        let filteredItems = items.filter((item) => item.id !== id);
        localStorage.setItem("productsInFavArr" , JSON.stringify(filteredItems));        
        localStorage.setItem("productsInFavObj" , JSON.stringify(filteredItems) )
        drawProductUI(allProducts)
        if(filteredItems.length==0){
            localStorage.removeItem("productsInFavArr")
            localStorage.removeItem("productsInFavObj")
        }
    }
}