Question

我用一些测试用例拍了一张照片，只是为了告诉你什么时候计算错了。在案例3中，如果我移出第1项而不是第2项，那将会奏效。经过几个小时试图解决这个问题后，我开始觉得有点失明。

计算有什么问题，可能是事件？有没有更好的方法呢？

enter image description here

代码：

var price = 0, math = '', items = [], state = 'outside';
$(function() {
  function calcPrice(math) {
    var value = null;
    if(items.length === 0) {
      price = 0;
    }
    console.log("Item array: " + items);
      $.each( items, function( key, value ) {
        if(math == 'add')
          price += $(".draggable[data-item='" + value + "']").data('price');
        console.log("Total price: " + price);
        if(math == 'remove'){
          console.log("Total price " + price + " -= " + $(".draggable[data-item='" + value + "']").data('price'));
          price -= $(".draggable[data-item='" + value + "']").data('price');
        }
      });
    $("#droppable").text(price);
  }
  $(".draggable").draggable({ containment: "#container", scroll: false });
  $("#droppable").droppable({
    drop: function(e, u) {  items.push(u.draggable.data('item'));
      price = 0;
      calcPrice('add');
      u.draggable.data('state', 'inside');
    },
    out: function(e, u) {
      if(u.draggable.data('state') == 'inside') {
        u.draggable.data('state', 'outside');
        items.splice($.inArray(u.draggable.data('item'), items,1)); 
        calcPrice('remove');
      }
    }
  });
});

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="container">
    <div id="droppable"></div>
    <div class="draggable" data-item="2" data-price="542" data-state="outside">item: 2<br>price: 542</div>
    <div class="draggable" data-item="1" data-price="541" data-state="outside">item: 1<br>price: 541</div>
  </div>
</body>
</html>

Answer 1

您的$.inArray功能错误，splice也是如此。你可以这样做：

var price = 0, math = '', items = [], state = 'outside';
 $(function() {
  function calcPrice(math) {
   var value = null;

   price = 0;

console.log("Item array: " + items);
  $.each( items, function( key, value ) {
    price+= $(".draggable[data-item='" + value + "']").data('price');

  });

$("#droppable").html(price);
}

 $(".draggable").draggable({ containment: "#container", scroll: false });
 $("#droppable").droppable({
   drop: function(e, u) {  
     items.push(u.draggable.data('item'));
     price = 0;
     calcPrice('add');
     u.draggable.data('state', 'inside');
  },
   out: function(e, u) {
     if(u.draggable.data('state') == 'inside') {
       u.draggable.data('state', 'outside');
       var myIndex = $.inArray(u.draggable.data('item'), items);
       items.splice(myIndex, 1);
       price = $("#droppable").text();
       calcPrice('remove');
     }
   }
 });
 });

如果您想在放入内容或拖出某些内容时添加和删除价格。

Answer 2

您的代码中有2个问题：

<强> Issue1：在drop:上，您没有检查列表中是否已存在该元素。您需要为每个元素设置一个Id，然后查看items[]是否具有相同ID的元素。在您的代码中，如果我多次从下拉框中删除相同的元素，则每次都会添加价格。

<强> Issue2：这是你描述的问题。澄清这里发生的事情。您的代码不会删除相反的值。它删除的价格等于数组中的剩余价格（在下拉框中）。因此，out:中的逻辑需要修改。

因此，您需要在drop:和out:

中重新考虑您的逻辑

基于具有项ID的数组的jQuery可拖动和可放置计算是错误的

2 个答案: