iT邦幫忙

0

使用localStorage,如何寫加入購物車按鈕的判斷式

  • 分享至 

  • xImage

關於判斷式的地方,我想判斷陣列裡物件名字是否重複(已經事先在陣列裡放入不相同的物件),執行第一次是正常的console.log("沒有相同物件,將新物件推入陣列中"),陣列有成功推入新的物件,但執行第二次之後都會是一樣的結果,導致我的陣列裡面有一堆重複的相同物件...
想請問判斷式要如何寫才能執行console.log("有相同物件,物件內數量加上新物件數量")的部分呢?

$("#addporduct").click(
    function(){
        var quantity = parseInt($("input.quantity").val())
        var name = String($("h1#name").text())
        var price = parseInt($("span#price").text())
        var img = "<img src='"+$("#img").attr("src")+"'></img>"
        var cart = {
            name:name,
            price:price,
            quantity:quantity,
            img:img
        }
        var newcart = JSON.parse(localStorage.getItem("carts"))
        if(localStorage.carts==="[]"){//如果是空陣列
            console.log("是空陣列,將新物件推進陣列")
            var newcarts = []
            newcarts.push(cart)
            localStorage.setItem("carts",JSON.stringify(newcarts))
            console.log(localStorage)
        }else if(newcart){//如果陣列裡有物件
            console.log("陣列裡有物件,判斷物件名是否有相同")
            var carts = JSON.parse(localStorage.getItem("carts"))
            for(var i=0;i<carts.length;i++){
                if(carts[i].name==cart.name){//判斷如果有相同物件
                    console.log("有相同物件,物件內數量加上新物件數量")
                    carts[i].quantity=carts[i].quantity+cart.quantity
                    localStorage.setItem("carts",JSON.stringify(carts))
                    console.log(localStorage)
                }else if(carts[i].name!=cart.name){//判斷如果沒有相同物件
                    console.log("沒有相同物件,將新物件推入陣列中")
                    carts.push(cart)
                    localStorage.setItem("carts",JSON.stringify(carts))
                    console.log(localStorage)
                }
               break
            }
        }else{//如果連陣列都沒有
            console.log("建立空陣列,將新物件推入陣列中")
            var newcarts = []
            newcarts.push(cart)
            localStorage.setItem("carts",JSON.stringify(newcarts))
            console.log(localStorage)
        }
        quantity = $("input.quantity").val(1)
    }
)

不好意思第一次發問,新手寫得很亂請見諒...
拜託各位大大解答了QQ

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

1
小山丘
iT邦新手 2 級 ‧ 2021-12-06 17:01:29
最佳解答

那部分不應該用迴圈來判斷吧
這樣會判斷到有相同的時候
已經會執行很多次的"沒有相同物件,將新物件推入陣列中"
應該直接判斷陣列中有沒有

https://cythilya.github.io/2017/05/08/javascript-find-item-in-an-array/#:~:text=%E5%B0%8B%E6%89%BE%E6%98%AF%E5%90%A6%E6%9C%89%E7%AC%A6%E5%90%88%E7%9A%84%E7%89%A9%E4%BB%B6%EF%BC%9AindexOf%20%E8%88%87%20%24.map
這個網址看有沒有幫助


$.map(carts, function(item, index) {
  return item.name;
}).indexOf(cart.name);

-1等於找不到執行"沒有相同物件,將新物件推入陣列中"
不是-1執行"有相同物件,物件內數量加上新物件數量"
試試看但我也沒試過上面那個語法

wendy1965 iT邦新手 5 級 ‧ 2021-12-06 17:57:10 檢舉

聽你說的把迴圈拿掉,然後使用你說的方法$map和indexOf就能成功判斷了!
我自己卡了好久...真的太感謝你!/images/emoticon/emoticon02.gif

小山丘 iT邦新手 2 級 ‧ 2021-12-08 09:35:50 檢舉

有幫助到你就好哈哈

0

你是否要使用 IIFE ?
因為函數沒有命名但 IIFE 沒有寫完整

wendy1965 iT邦新手 5 級 ‧ 2021-12-06 17:58:35 檢舉

我可能要再研究IIFE是甚麼了,感謝解答~

我要發表回答

立即登入回答