如何检查动态数组内指定元素，实现购物车加购重复商品仅增加数量

你当前的代码存在两个核心问题需要先修正，才能实现id匹配逻辑：

1. 现有cartArray直接存储HTML字符串，无法直接提取商品id做匹配校验，建议改为存储商品对象，后续渲染时再生成HTML，更方便数据操作
2. 循环内的this指向的是触发点击事件的.addToCart按钮，不是购物车列表中的对应商品条目，原有$(this).find('.quantity')的写法无法正确找到对应商品的数量输入框

你需要的id匹配逻辑 #

如果你已经将cartArray改为存储商品对象，循环中的匹配判断直接对比id即可：

// 核心id匹配逻辑，==兼容数字和字符串类型的id，避免类型不同导致匹配失败
if (cartArray[i].id == id) {
  // 匹配到相同id的商品，更新数组内的商品数量
  cartArray[i].quantity += 1;
  // 同时更新页面上对应商品的数量输入框
  $(`#cartList li .id:contains(${id})`).siblings('.details').find('.quantity').val(cartArray[i].quantity);
  flag = 1;
  // 同步更新本地存储
  localStorage.setItem('cartItem',JSON.stringify(cartArray));
  break; // 匹配到就跳出循环，减少不必要的遍历
}

完整修正后的代码 #

$(document).ready(function(){
    // 优先从本地存储读取已有的购物车数据
    var cartArray = JSON.parse(localStorage.getItem('cartItem')) || [];
    var total = 0;
    var shipping = 2;

    // 页面初始化时渲染已存的购物车商品
    renderCart();

    $(".addToCart").click(function(){
        var flag = 0;
        // 获取待添加商品的所有属性
        var id = $(this).data("id");
        var price = $(this).data("price");
        var image = $(this).data('image');
        var name = $(this).data("name");
        var quantity = $(this).data("quantity");
        var availability = $(this).data("availability");
        var weight = $(this).data("weight");

        // 隐藏空购物车提示
        if(cartArray.length === 0) { 
            $("#empty-cart").css("display","none");
        }

        // 遍历购物车检查商品是否已存在
        for(var i = 0; i < cartArray.length; ++i){
            // 核心id匹配逻辑
            if (cartArray[i].id == id) {
                cartArray[i].quantity += 1;
                flag = 1;
                localStorage.setItem('cartItem',JSON.stringify(cartArray));
                renderCart();
                break;
            }
        }

        // 商品不存在则新增条目
        if(flag == 0){
            // 将商品信息作为对象存入数组，不要直接存HTML字符串
            var newItem = {
                id: id,
                price: price,
                image: image,
                name: name,
                quantity: quantity,
                availability: availability,
                weight: weight
            };
            cartArray.push(newItem);
            localStorage.setItem('cartItem',JSON.stringify(cartArray));
            renderCart();
            // 更新购物车角标计数
            var counterInc = parseInt($(".badge").html() || 0) + 1;
            $(".badge").html(counterInc);
            console.log("Item Added")
        }
    })

    // 封装购物车渲染函数，避免重复写HTML生成逻辑
    function renderCart() {
        $("#cartList").empty();
        if(cartArray.length === 0) {
            $("#empty-cart").css("display","block");
            $(".badge").html(0);
            return;
        }
        // 遍历购物车数组生成DOM节点
        cartArray.forEach(function(item){
            var cartItem =  `<li class='newItem'>
                <p class='id' style='display:none'>${item.id}</p>
                <div class='picture'><img src='${item.image}' ></div>
                <div class='details'>
                    <p class='name'>${item.name}</p>
                    <span class='weight'>${item.weight}</span>
                    <span> /</span>
                    <span class='avail'>${item.availability}</span>
                    <p class='price'>${item.price}</p>
                    <a type='button' class='inc'>+</a>
                    <input type='text' class='quantity' value="${item.quantity}" >
                    <a type='button' class='dec'>-</a>
                </div>
                <a type='button' class='removeItem'><i class='fa fa-trash'></i></a>
            </li>`;
            $("#cartList").prepend(cartItem);
        });
        $(".badge").html(cartArray.length);
    }
});

内容的提问来源于stack exchange，提问作者Safina Siddique