Javascript不是't正确地加和减浮点数

Javascript isn't correctly adding and subtracting floats

本文关键字：浮点数 正确地 不是 Javascript      更新时间：2023-09-26

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

我尝试使用两个不同的函数将两个浮点添加到一起
一个是加法，一个是减法。

这是代码：

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

Inu，除了修复if(action = 0)错误外，您可能还需要考虑以下内容：

  • 在javascript中附加点击处理程序，而不是作为HTML属性
  • 通过更仔细地选择jQuery选择器和方法链接，事情会简化
  • 通过将点击处理委托给静态包装器（#selected和#my），可以避免动态交换"addItem"answers"remItem"。每个项目的点击操作将由当前包装器自动确定
  • 在点击处理程序中，this指的是被点击的a元素，因此不需要使用jQuery选择器重新发现它，而.closest()将避免按id查找项目的需要
  • 为了保持一个可靠的总数，您应该通过循环所有项目来从头开始重新计算，而不是应用delta
  • 通过将值放在带有"$"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);
}

未经测试

您在这里使用赋值运算符=：if(action=0){，而您应该使用comparisson运算符==作为if(action==0){

相关文章：