0

我用一些测试用例做了一张图片，只是为了告诉你计算什么时候出错。在第 3 种情况下，如果我移出第 1 项而不是第 2 项，它会起作用。在尝试解决这个问题几个小时后，我开始感到有点盲目。

计算有什么问题，可能是事件吗？有没有更好的方法来做到这一点？

在此处输入图像描述

jsbin：http: //jsbin.com/ejasun/1/edit

代码：

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>
4

2 回答 2

1

您的$.inArray函数是错误的，并且拼接也是如此。你可以这样做：

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

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

于 2013-02-11T14:51:11.257 回答
0

您的代码中有两个问题：

问题 1： 在drop:您没有检查该元素是否已存在于列表中。您需要为每个元素设置一个 ID，并在放置时查看是否items[]有一个具有相同 ID 的元素。在您的代码中，如果我多次从下拉框中删除相同的元素，则每次都会添加价格。

问题2： 这是您描述的问题。澄清这里发生了什么。您的代码不会删除相反的值。它删除的价格等于数组中剩余的价格（在下拉框中）。所以你的逻辑out:需要修改。

所以你需要重新思考你的drop:逻辑out:

于 2013-02-11T13:02:46.363 回答