JavaScript 无法正确添加和减去 float

Question

我一直在为我正在开发的网站使用类似库存的系统。
我通常不使用 JavaScript，所以这个小问题一直让我抓狂。

我正在尝试使用两个不同的函数将两个 float 添加在一起。
一是加法，一是减法。

这是代码:

function addItem(item){
  $("#item-" + item.toString()).insertAfter("#selected h1");
  $("#item-" + item.toString() + " a").attr("onclick","remItem(" + item.toString() + ")");
  updateTotal(item, 0);
}

function remItem(item){
  $("#item-" + item.toString()).insertAfter("#my h1");
  $("#item-" + item.toString() + " a").attr("onclick","addItem(" + item.toString() + ")");
  updateTotal(item, 1);
}

function updateTotal(item, action){
  if(action=0){
    var value = $("#item-" + item.toString() + " a .value").text().replace("$ ", "");
    var oldVal = $(".total").text().replace("$ ", "");
    var newVal = parseFloat(value) + parseFloat(oldVal);
    $(".total").text(newVal);
  } else {
    var value = $("#item-" + item.toString() + " a .value").text().replace("$ ", "");
    var oldVal = $(".total").text().replace("$ ", "");
    var newVal = parseFloat(value) - parseFloat(oldVal);
    $(".total").text(newVal);
  }
}

.wrapper{
  text-align: center;
}

.item-holder{
  width: 45%;
  text-align: left;
  padding: 5px;
  overflow: auto;
  display: inline-block;
  background-color: #222;
  min-height: 160px;
}
.item-holder h1{
  color: white;
  margin: 0;
  padding: 0;
  text-align: center;
}

.smallimg{
  margin: 2px 2%;
  width: 96%;
}
.item {
  margin: 2px 2px 2px 2px !important;
  cursor: pointer;
  color: #333;
  background: rgba(200,200,200,0.9);
  text-align: center;
  min-width: 60px;
  max-width: 100px;
  width: 18%;
  border: solid medium gray;
  display: inline-block;
}
.value{
  font-size: 10pt;
  font-weight: bold;
  padding-top: 5px;
}
.rarity{
  font-style: italic;
  font-weight: bold;
}
.total{
  font-weight: bold;
}




.Consumer{
  border-color: rgb(176, 195, 217);
}
.Mil-Spec{
  border-color: rgb(75, 105, 255);
}
.Industrial{
  border-color: rgb(94, 152, 217);
}
.Restricted{
  border-color: rgb(136, 71, 255);
}
.Classified{
  border-color: rgb(211, 44, 230);
}
.Covert{
  border-color: rgb(235, 75, 75);
}


#selected{
  color: white !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <span class="total">$ 0.00</span><br /><br />
  
<!-- START ITEM HOLDER-->
<div id="my" class="item-holder">
  <h1>Your Items</h1>
  
  <div class="item Industrial" id="item-22">
    <a onClick="addItem(22);">
      <div class="value">$ 0.05</div>
    
      <img class="smallimg" src="http://cdn.steamcommunity.com/economy/image/7xs5DOPUQVgttOnINvLH41dX872npE8Y-Xo60tIUj0QmEA73usgHSo1t9TYQkpttT1Co-q67Txz_cT3A0wKYTilSGv2rzABDnRzxPBPYiHxLRuPi6u4BBfNwDMCbUs4XGA4Ox7nMBUq2J_ktDuKNfElG9JLx4gcd6DBlgc5SmRYmGE6o_s4QSYgi9G4Z2Jl8CEbm-Ky8VUKqJ2qCzFLOQyUZUOijyg==/99fx66f" title="SG 553 | Waves Perforated (Field-Tested)">
  
      <div class="rarity">Field-Tested</div>  
    </a>
  </div>

    <div class="item Restricted" id="item-21">
    <a onClick="addItem(21);">
      <div class="value">$ 11.40</div>
    
      <img class="smallimg" src="http://cdn.steamcommunity.com/economy/image/7xs5DOPUQVgttOnINvLH41dX872npE8Y-Xo60tIUj0QmEA73usgHSo1t9TYQkpttT1Co-q67Txz_cT3A0wKYTilSGv2rzABDnRzxPBPYiHxLRuPi6u4BBfNwDMCbUs4XGA4Ox7nMBUq2J_ktDuKNfElG9JLx4gcd6DBlgc5SmRYmGE6o_s4QSYgi9G4Z2Jl8CEbm-Ky8VUKqJ2qCzFLOQyUZUOijyg==/99fx66f" title="SG 553 | Waves Perforated (Field-Tested)">
  
      <div class="rarity">Field-Tested</div>  
    </a>
  </div>
  
    <div class="item Covert" id="item-20">
    <a onClick="addItem(20);">
      <div class="value">$ 7.65</div>
    
      <img class="smallimg" src="http://cdn.steamcommunity.com/economy/image/7xs5DOPUQVgttOnINvLH41dX872npE8Y-Xo60tIUj0QmEA73usgHSo1t9TYQkpttT1Co-q67Txz_cT3A0wKYTilSGv2rzABDnRzxPBPYiHxLRuPi6u4BBfNwDMCbUs4XGA4Ox7nMBUq2J_ktDuKNfElG9JLx4gcd6DBlgc5SmRYmGE6o_s4QSYgi9G4Z2Jl8CEbm-Ky8VUKqJ2qCzFLOQyUZUOijyg==/99fx66f" title="SG 553 | Waves Perforated (Field-Tested)">
  
      <div class="rarity">Field-Tested</div>  
    </a>
  </div>
       
       
</div>
  <!-- END ITEM HOLDER -->

<div id="selected" class="item-holder">
  <h1>Selected Items</h1>
  
</div>
  
</div>

第一个项目工作正常，您添加该项目，它会更新总数。
添加第二个项目，它会从旧项目中减去新项目的值。
删除第一项并将该值添加到总计中。
有点乱，随机加减。

我真的不知道为什么会造成这种情况，所以我来到这里。
你知道我在做什么吗？

提前致谢!

CodePen

Answer 1

Inu，除了修复 if(action = 0) 错误之外，您可能还需要考虑以下事项:

• 在 JavaScript 中附加点击处理程序，而不是作为 HTML 属性。
• 通过更仔细地选择 jQuery 选择器和方法链，事情将会变得简单。
• 通过将点击处理委托(delegate)给静态包装器(#selected 和 #my)，您可以避免动态交换“addItem”和“remItem”的需要。每个项目的点击操作将由当前包装器自动确定。
• 在点击处理程序中，this 引用被点击的 a 元素，因此无需使用 jQuery 选择器重新发现它，并且 .closest() 将避免通过 id 查找项目的需要。
• 为了保持可靠的总计，您确实应该通过循环所有项目从头开始重新计算，而不是应用增量。
• 通过将值放入带有“$”outisde 的范围内，您可以直接获取值，而无需删除符号。

把所有东西放在一起，你最终应该得到这样的结果:

HTML

....
<div class="value">$ <span>11.40</span></div>
....

Javascript

$('#my').on('click', '.item a', function(e) {
    e.preventDefault();
    $(this).closest('.item').insertAfter("#selected h1");
    calcTotal();
});

$('#selected').on('click', '.item a', function(e) {
    e.preventDefault();
    $(this).closest('.item').insertAfter("#my h1");
    calcTotal();
});

function calcTotal(item, sign) {
    var total = 0;
    $("#selected .value span").each(function() {
        total += Number($(this).text());
    });
    $(".total").text(total);
}

未经测试