Javascript 如何在购物车中显示关于使用jquery丢弃物品的袋子的字段

我对

jQuery

非常陌生。我目前正在做一个项目。在这个项目中有三种类型的物品和三个袋子，用户应该选择其中的任何一个袋子并尝试将物品放入其中。如果用户选择行李1，则他可以删除项目1、项目2、项目3。如果用户选择行李2，则他可以删除项目2、项目3。如果用户选择行李3，则他只能删除项目3

现在的问题是，我添加了一个额外的字段

bag

，以显示物品掉落的行李类型（例如“bag1”或“bag2”或“bag3”）

但问题是我无法显示

bag

字段。有人告诉我我能做什么吗。我为此奋斗了很多

JSFIDLE上的示例：

HTML:

名称
纸袋
量
价格
去除

Javascript:

var data = {
    "total": 0,
    "rows": []
};
var totalCost = 0;
$(function () {
    $('#cartcontent1').datagrid({
        singleSelect: true
    });

    $('.bag').droppable({
        onDrop: function (e, source) {
            var name = $(source).find('p:eq(0)').html();
            var price = $(source).find('p:eq(1)').html();
            addProduct(name, parseFloat(price.split('$')[1]));
            $(source.draggable).remove();
            //$('.bag').droppable('enable');
            $(this).droppable('enable');
        }
    });


    $('.item').each(function (index, div) {
        var scope = $(this).attr('data-scope');
        //debugger;
        $(div).draggable({
            revert: true,
            proxy: 'clone',
            onStartDrag: function () {
                $('.bag').droppable('enable');
                $('.bag:not(.selected)').droppable('disable');
                $('.bag:not(.bag[data-scope*=' + scope + '])').droppable('disable');

                $(this).draggable('options').cursor = 'not-allowed';
                $(this).draggable('proxy').css('z-index', 10);
            },
            onStopDrag: function () {
                //$('.bag').droppable('enable');
                $(this).draggable('options').cursor = 'move';
            }
        });
    });



    $('.bag').click(function () {
        $('.selected').removeClass('selected');
        $(this).addClass('selected');
    });

});


function addProduct(name, price) {
    var totalQuantity = sumQuantity(data);

    if (totalQuantity < 10) {
        function add() {
            for (var i = 0; i < data.total; i++) {
                var row = data.rows[i];
                if (row.name == name) {
                    row.quantity += 1;
                    return;
                }
            }
            data.total += 1;
            data.rows.push({
                name: name,
                quantity: 1,
                price: price,
                remove: '<a href="#" class="remove" onclick="removeProduct(this, event)">X</a>'
            });
        }
        add();
        totalCost += price;
        $('#cartcontent1').datagrid('loadData', data);
        $('div.cart .total').html('Total: $' + totalCost);
    } else {
        alert('cannot have more than 10 items');
    }
}

function removeProduct(el, event) {
    var tr = $(el).closest('tr');
    var name = tr.find('td[field=name]').text();
    var price = tr.find('td[field=price]').text();
    var quantity = tr.find('td[field=quantity]').text();
    for (var i = 0; i < data.total; i++) {
        var row = data.rows[i];
        if (row.name == name) {
            data.rows.splice(i, 1);
            data.total--;
            break;
        }
    }
    totalCost -= price * quantity;
    $('#cartcontent1').datagrid('loadData', data);
    $('div.cart .total').html('Total: $' + totalCost);
}

function sumQuantity(data) {
    var sum = 0;
    for (var i = 0; i < data.total; i++) {
        sum += data.rows[i].quantity;
    }
    return sum;
}

var数据={
“总计”：0，
“行”：[]
};
var总成本=0；
$（函数（）{
$（'#cartcontent1'）。数据网格({
singleSelect:true
});
$（'.bag'）。可拖放({
onDrop：函数（e，源）{
var name=$（source.find（'p:eq（0）'）.html（）；
var price=$（source.find（'p:eq（1）'）.html（）；
addProduct（名称，parseFloat（price.split（“$”）[1]）；
$（source.draggable）.remove（）；
//$（'.bag'）.droppable（'enable'）；
$（this.dropable（'enable'）；
}
});
$（'.item'）。每个（函数（索引，div）{
var scope=$（this.attr（'data-scope'）；
//调试器；
$（分区）。可拖动({
回复：对，
代理：“克隆”，
onStartDrag:函数（）{
$（'.bag'）.droppable（'enable'）；
$（'.bag:未（.selected'）。可拖放（'disable'）；
$（'.bag:not（.bag[data scope*='+scope+']））。可拖放（'disable'）；
$（this）.draggable（'options'）。游标='不允许'；
$（this）.draggable（'proxy'）.css（'z-index'，10）；
},
onStopDrag:函数（）{
//$（'.bag'）.droppable（'enable'）；
$（this）.draggable（'options'）。游标='move'；
}
});
});
$（'.bag'）。单击（函数（）{
$（'.selected'）.removeClass（'selected'）；
$（this.addClass（'selected'）；
});
});
功能添加产品（名称、价格）{
var totalQuantity=总数量（数据）；
如果（总数量<10）{
函数add（）{
对于（变量i=0；i

我更新了行李html以包含行李id。在onDrop函数中，我添加了

e.target.id

以获取行李id

$('.bag').droppable({
    onDrop: function (e, source) {
        var name = $(source).find('p:eq(0)').html();
        var price = $(source).find('p:eq(1)').html();
        var bag = e.target.id;
        addProduct(name, parseFloat(price.split('$')[1]), bag);
        $(source.draggable).remove();
        //$('.bag').droppable('enable');
        $(this).droppable('enable');
    }
});

将此行李id传递给addProduct功能。这就是你心目中的例子吗

编辑：当您将同一物品添加到两个不同的袋子时，似乎出现了问题。我不确定您是否想将同一物品添加到不同的袋子中。如果要执行此操作，可以使用

If（row.name==name&&row.bag==bag）

功能添加产品（名称、价格、包装）{
var totalQuantity=总数量（数据）；
如果（总数量<10）{
函数add（）{
对于（变量i=0；i

$('.bag').droppable({
    onDrop: function (e, source) {
        var name = $(source).find('p:eq(0)').html();
        var price = $(source).find('p:eq(1)').html();
        var bag = e.target.id;
        addProduct(name, parseFloat(price.split('$')[1]), bag);
        $(source.draggable).remove();
        //$('.bag').droppable('enable');
        $(this).droppable('enable');
    }
});

  function addProduct(name, price, bag) {
      var totalQuantity = sumQuantity(data);

      if (totalQuantity < 10) {
          function add() {
              for (var i = 0; i < data.total; i++) {
                  var row = data.rows[i];
                  if (row.name == name && row.bag == bag) {
                      row.quantity += 1;
                      return;
                  }
              }
              data.total += 1;
              data.rows.push({
                  name: name,
                  bag: bag,
                  quantity: 1,
                  price: price,
                  remove: '<a href="#" class="remove" onclick="removeProduct(this, event)">X</a>'
              });
          }
          add();
          totalCost += price;
          $('#cartcontent1').datagrid('loadData', data);
          $('div.cart .total').html('Total: $' + totalCost);
      } else {
          alert('cannot have more than 10 items');
      }
  }