JSON 数组未填充

Question

我正在尝试将项目添加到存储到 sessionStorage 的数组中。 add 函数应该检查数组中是否有匹配的值，如果有，则添加到该项目的计数中。如果没有，它应该将项目推送到数组上。

由于某种原因，这两个函数本身工作得很好，但是当组合在 if/else 语句中时，它要么不会将项目推送到数组中，要么添加到计数中并将重复项推送到数组中。

我尝试了两种不同的方法。

我是 JavaScript 和 jQuery 的新手，非常感谢任何见解。

方法一：

$(".prodItem").on("click", ".addCart", function (e) {

cart = JSON.parse(sessionStorage.getItem('shopCart'));


let selectedProd = $(e.target).closest('.prodItem').find('.prodName').html();
console.log(selectedProd);
let selectedPrice = $(this).siblings('.price').html();
console.log(selectedPrice);
let count = 1;



$.each(cart, function (index, value) {
        if (selectedProd === value.prod) {
            value.count++;
            console.log(selectedProd);
            console.log(value.prod);
            storeCart();
            return;
        }
    });
    if ($.inArray(selectedProd, cart) !== -1) {
        // Add new product object to array
        let currentProd = new product(
            selectedProd,
            count++,
            selectedPrice);
        cart.push(currentProd);
    }

// Save array to sessionStorage
storeCart();
});

方法二：

$(".prodItem").on("click", ".addCart", function (e) {

cart = JSON.parse(sessionStorage.getItem('shopCart'));


let selectedProd = $(e.target).closest('.prodItem').find('.prodName').html();
console.log(selectedProd);
let selectedPrice = $(this).siblings('.price').html();
console.log(selectedPrice);
let count = 1;

for (let i = 0; i < cart.length; i++) {
    if (selectedProd === cart[i].prod) {
        value.count++;
        console.log(selectedProd);
        console.log(value.prod);
        storeCart();
        return;
    } else {
        let currentProd = new product(
            selectedProd,
            count++,
            selectedPrice);
        cart.push(currentProd);
    }
}
// Save array to sessionStorage
storeCart();

});

HTML：

<div class="col-4 prodimg prodItem">
      <div class="card bg-light text-white rounded-circle shadow">
        <img class="card-img rounded-circle shadow" src="images/sofas/freud-sofa-1.jpg"
          alt="Camel coloured, corduroy Freud sofa">
        <div class="card-img-overlay crdimg" id="">
          <input class="form-check-input d-none" type="checkbox" id="checkboxFreud" value="" aria-label="...">
          <label class="card-title form-check" for="checkboxFreud">
            <h3 class="prodName">Frued Sofa</h3>
          </label>
          <label class="card-text form-check" for="checkboxFreud">
            <p>This piece is the perfect fit to liven up any space.<br>A comfortable six-seater with durable
              corduroy upholstery.<br><br>R<span class="price">56 988.00</span> (incl. VAT)<i
                class="btn bi bi-cart-plus ml-4 addCart"></i></p>
          </label>
        </div>
      </div>
    </div>

**注意：空购物车数组是在本节之前创建并存储的。

Answer 1

答案其实很简单，我找到了这里：

我在运行 $.each 语句之前声明了一个布尔值，然后在找到产品时更改它。代码现在看起来像这样。

$(".prodItem").on("click", ".addCart", function (e) {
cart = JSON.parse(sessionStorage.getItem('shopCart'));
cart = cart != null ? cart : [];

let selectedProd = $(e.target).closest('.prodItem').find('.prodName').text();
console.log(selectedProd);
let selectedPrice = $(this).siblings('.price').text();
console.log(selectedPrice);
let count = 1;

let currentProd = new product(
    selectedProd,
    count,
    selectedPrice);

console.log($.type(cart));

let exists = false;                   <-- declare boolean

$.each(cart, function (index, value) {
        console.log($.type(cart));
        if (selectedProd === value.prod) {
            value.count++;
            console.log(selectedProd);
            console.log(value.prod);
            exists = true;            <-- change boolean
            storeCart();
        }
    });
if(!exists) {                         <-- check boolean
    cart.push(currentProd);
}

// Save array to sessionStorage
storeCart();
});

Answer 2

如果我正确地阅读了这些函数，并且为了借鉴 @Randy Casburn 的答案，您可能需要尝试使用

.text()

而不是

.html()

来获取价格值。但是，如果价格元素是输入，您可能需要使用

.value()

来代替。