如何使用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');
      }
  }