Question

我一直在为我正在研究的网站制作类似库存的系统我通常不使用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

Answer 1

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

在javascript中附加点击处理程序，而不是HTML属性。
通过更精心选择的jQuery选择器和方法链来简化事情。
通过将点击处理委派给静态包装器（#selected和#my），您可以避免动态更换“addItem”＃39;和＆＃39; remItem＆＃39;。每个项目的点击操作将由当前包装器自动确定。
，this指的是单击的a元素，因此无需使用jQuery选择器重新发现它，.closest()将无需按ID查找项目
为了保持可靠的总数，你应该通过循环遍历所有项目而不是应用增量来从头开始重新计算。
将值放在＆＃39; $＆＃39; 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);
}

未测试

Answer 2

当您使用比较运算符=作为if(action=0){时，您在==使用了if(action==0){

Javascript没有正确添加和减去浮点数

2 个答案: