Question

当用户选择某个项目时，我会将该项目的id存储在面板上的hidden input中。现在，当用户选择相同的项目时，我想检查面板上是否已存在id，如果确实存在，我会将数量值从1更改为2.

我怎样才能做到这一点？

PS：使用下面的代码，当用户选择面板上已有的项目时，它会再次附加该项目，并且我一直有重复项。

function findID(sol)
{
    var products = JSON.parse(sol.dataset.sol);

    if(sol.checked == true)  {
        $('.panel').append(
            '<div class="container" style=" font-size:14px; "> '+
            '<input type="hidden"  value='+products.id+' data-id="'+products.id+'"   name="food_id[]" />'+
            '<table style="width:100%;" class="table" id="tables">'+

            '<tbody id="item_list">'+
            '<tr>'+
            '<td  class="name" >'+products.name+'</td>'+
            '<td><input size="50" type="text"  value="1" class="form-control quantity" id="qty" placeholder=" qty " name="quantity[]"  required/></td>'+
            '</tr>'+
            '</tbody>'+
            '</table>'+
            '</div>'

        )
    }
}

Answer 1

您只需扫描DOM以查找已添加的元素，如果存在，则找到.quantity元素并增加值。其他明智地添加它就像你已经做的那样

function findID(sol) {
  var products = JSON.parse(sol.dataset.sol),
    existing;

  if (sol.checked == true) {
    existing = $('.panel input[data-id="' + ad.id + '"]');

    if (existing.length) {
      // already added, just increase the count
      existing.closest('.container').find('.quantity').val(function(i, value) {
        return parseInt(value, 10) + 1;
      })
    } else {
      // not yet added. Add it now
      $('.panel').append(
        '<div class="container" style=" font-size:14px; "> ' +
        '<input type="hidden"  value=' + ad.id + ' data-id="' + ad.id + '"   name="food_id[]" />' +
        '<table style="width:100%;" class="table">' +

        '<tbody id="item_list">' +
        '<tr>' +
        '<td  class="name" >' + ad.name + '</td>' +
        '<td><input size="50" type="text"  value="1" class="form-control quantity" placeholder=" qty " name="quantity[]"  required/></td>' +
        '</tr>' +
        '</tbody>' +
        '</table>' +
        '</div>'

      )
    }


  }

我还从您添加的元素中删除了所有id属性，因为它们必须是唯一的。

Answer 2

您可以将ID作为数据元素放在面板上并在那里进行检查。

var selectedIds = $('.panel').data('selectedIds') || [];

if (selectedIds.indexOf(newSelectedId) > -1) {
    //id already selected
    //do whatever logic
} else {
    //id not already selected
    selectedIds.push(newSelectedId);
    $('.panel').data('selectedIds', selectedIds);
    //do your other logic
}

如何检查ID是否已存在 - JS

2 个答案: