Jquery - 如果它不存在，则仅在数组中添加项目，如果它在数组中则更新其数量

Question

我有一个表单，用户可以在其中输入详细信息并通过选中复选框来选择一个项目。

单击添加按钮时，检查项目值和存储在数组中的用户输入值，我在 url 中传递这些值。

用户可以添加多个具有不同名称和电子邮件的项目。假设我有三个项目，所以用户可以选择 item1 并填写 name1 和 email1 并单击添加按钮，类似地，如果他选择 item1 和 item2 并添加 name2 和 email2，他可以添加这些值。

每次点击时我都想检查项目 id 是否已经存在于数组中我不想添加它，只需增加数组中已经存在的该项目的数量并使用新数量更新数组

var allVals = []; //array where i am storing selected checkbox value
jQuery("#btnadd").click(function(event) { //on click of this button i am getting all values to construct url and pass this value to multi div from where i will validate my url 
    var qty;
    jQuery(".selectitem:checked").each(function() {
            qty = jQuery(this).next().find('input[name="quantity"]').val()); //getting quantity of selected checkbox its a input field
        if (jQuery.inArray(jQuery(this).val(), allVals) == -1) {
            allVals.push(jQuery(this).val() + ',' + qty); //item id not present in array so adding item id,qty in array
        } else {
            qty = qty + 1;
            //here i would like to increase quantity of those items only which already present in array something like this.qty and update my allVal array with this new quantity
        }
    });
var rslt = allVals.join(';'); jQuery('#multi').val(rslt); //updating multi div value with allVals from here i will make redirect. Just want to pass correct values in that field
});

Answer 1

问题：现在您将项目名称和数量都插入到像[item1,1,item2,1,...] 这样的数组中，所以从技术上讲，您无法控制item1 与什么值相关联。即使您编写一个逻辑来获取项目名称的下一个索引，它也没有效率。

解决方案：我建议你使用 Object 而不是数组。因为使用对象，您可以使用property Name 访问并为其分配值。它的耦合性更强。请看下面的例子

var allVals = {}; // make it a object.

使用此结构，您可以用此代码替换整个 if else 块。

var key = jQuery(this).val();
allVals[key] =  (allVals[key] || 0 ) + parseInt(qty,10);

解释上述语法。

• allVals[key] - 在这里您正在添加新属性/按名称访问现有属性 item1、item2 等...

• (allVals[key] || 0 ) - 如果属性已存在，则使用其值。否则使用 0，因为它将是 undefined。

• parseInt(qty,10); - 由于您正在进行数学运算，因此始终建议您将数据转换为数字类型，然后执行数学运算。这里如果你不使用parseint你的qty将会是字符串，你会得到无效的结果。

使用上面的语法，你的最终语法应该像..

var allVals = {}; 
jQuery("#btnadd").click(function(event) { 
    var qty;
    jQuery(".selectitem:checked").each(function() {
            qty = jQuery(this).next().find('input[name="quantity"]').val(); 
            var key = jQuery(this).val();
            allVals[key] =  (allVals[key] || 0 ) + parseInt(qty,10);
    });
//var rslt = allVals.join(';'); jQuery('#multi').val(rslt); 
// since your data structure has changed I am not sure if you need this.
});

allVals的最终数据会像..

{
 item1 : 2,
 item2 : 3,
 item3 : 1,
 item4 : 1 
}

Answer 2

在数组中循环查找键并将数量更新为值。

    var qty;
     jQuery(".selectitem:checked")
       .each(function() {
           qty = jQuery(this)
             .next()
             .find('input[name="quantity"]')
             .val()); //getting quantity of selected checkbox its a input field
         if (jQuery.inArray(jQuery(this)
             .val(), allVals) == -1) {
           allVals.push(jQuery(this)
             .val() + ',' + qty); //item id not present in array so adding item id,qty in array
         } else {
           qty = qty + 1;

           for (var i = 0; i < allVals.length; i++) {
             if (allVals[i].Key == jQuery(this)
               .val()) {
               allVals[i].Value = qty;
             }
           }
         });