Question

我有类似cart的内容，用户可以将所需产品添加到自己的cart （这是购物车是一个数组），但我想阻止添加重复{ {1}}，而是将其添加为新的id调用value，以显示用户选择相同产品的次数。我在下面尝试循环但没有成功。

＆＃13;

var cart = [];
var i = 1;

$('li').click(function() {
  product = {};

  var id = $(this).data('id');
  product["id"] = id;

  $.each(product, function(i, v) {
    if (v.id == id) {
      console.log('dup');
     //product["q"] = i++;
    } else {
      console.log('not dup');
      //product["id"] = id;
    }
  });

  cart.push(product);
  console.log(cart);
});

＆＃13;

目标<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li data-id="1">Product 1</li> <li data-id="2">Product 2</li> <li data-id="3">Product 3</li> <li data-id="4">Product 4</li> </ul>应该是这样的：

array

Answer 1

为什么不创建一个您通过ID引用的对象，这样您就不必每次都找到（可能匹配的）项目？

const cart = {};
$('li').click(function(e) {
  const id = e.target.dataset.id;
  if (!cart[id]) cart[id] = {
    id,
    clickCount: 0,
  }
  cart[id].clickCount++;
  console.log(cart);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li data-id="1">Product 1</li>
  <li data-id="2">Product 2</li>
  <li data-id="3">Product 3</li>
  <li data-id="4">Product 4</li>
</ul>

Answer 2

这很简单。你有一个名为Cart_Item的对象：

var Cart_Item : { id: 0, quantity: 0};

您有一个Cart_Items数组，名为Cart_Collection。

您有一个功能来检查它是否已经存在：（如果它是唯一的，则此函数返回-1，否则返回找到重复项的索引[以避免在代码中稍后再次循环以更新它]）

var cartItemCheckDuplicate = function(id, cartCollection)
{
   for(var i = 0; i < cartCollection.length; i++)
   {
      if(cartCollection[i].id == id)
        return i;
   }
   return -1;
}

现在，您的代码部分如下所示：

$('li').click(function() {
  product = {};

  var id = $(this).data('id');
  product["id"] = id;
  product["quantity"] = 1; // assumed as default

  var itemDupIndex = cartItemCheckDuplicate(id, cartCollection);
  if(itemDupIndex != -1) // which means it is duplicate
  {
    product['quantity'] = product['quantity']+1;
    cartCollection[itemDupIndex] = product;
  }
  else // it is unique
  {
    cartCollection[itemDupIndex] = product;
  }

});

如何避免添加重复的数组条目，而是更新已存在的条目

2 个答案: