0

私はに非常に新しいjQueryです。私は現在、プロジェクトに取り組んでいます。このプロジェクトには 3 種類のアイテムと 3 つのバッグがあり、ユーザーはいずれかのバッグを選択してアイテムをドロップしてみてください。ユーザーがバッグ 1 を選択するとアイテム 1、アイテム 2、アイテム 3 をドロップできます。バッグ 2 を選択するとアイテム 2、アイテム 3 をドロップできます。バッグ 3 を選択するとアイテム 3 のみをドロップできます。

問題は、アイテムがドロップされたバッグのタイプを表示するフィールドを追加したことです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;
}
4

1 に答える 1

0

バッグの 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 関数に渡します。http://jsfiddle.net/Vwu37/55/の例を参照してください。

編集: 同じアイテムを 2 つの異なるバッグに追加すると問題が発生するようです。同じアイテムを別のバッグに追加できるようにするかどうかはわかりません. これを行いたい場合は、 addProduct 関数を次のように変更できますif (row.name == name && row.bag == bag)

  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');
      }
  }
于 2013-09-23T14:00:48.243 に答える