如何使用jquery在购物车中显示有关放置物品的袋子的字段

Question

我对jQuery非常jQuery 。 我目前正在做一个项目。 在该项目中，有3种物品和3个袋子，因此用户应选择任何一个袋子并尝试将物品放入其中。 如果用户选择袋子1，则他可以放下item1，item2，item3（如果他选择袋子2），他可以放下item2，item3（如果他选择bag3），他只能放下item3。

现在的问题是，我添加了一个额外的外地bag来显示放置物品的袋的类型（例如“ bag1”或“ bag2”或“ bag3”）。

但是问题是我无法显示bag字段。 有谁在外面让我知道我能做什么。 我为此付出了很多努力。

jsfiddle上的示例： http : //jsfiddle.net/Vwu37/48/

HTML：

<tr>
    <th field="name" width=140>Name</th>
    <th field="bag" width=60>Bag</th>
    <th field="quantity" width=60 align="right">Quantity</th>
    <th field="price" width=60 align="right">Price</th>
    <th field="remove" width=60 align="right">Remove</th>
</tr>

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;
}

Answer 1

我更新了bag html以包含bag 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');
    }
});

将此bag id传递给addProduct函数。 例如http://jsfiddle.net/Vwu37/55/中的示例，这是您想到的吗？

编辑：当您将相同的商品添加到两个不同的包装袋中时，似乎出现了问题。 我不确定您是否希望能够将同一物品添加到不同的包中。 如果要执行此操作，可以使用if (row.name == name && row.bag == bag)更改addProduct函数。

  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');
      }
  }