首页 > jquery > Jquery总值不断增加

Jquery总值不断增加 (Jquery total value keeps getting added up)

2018-12-18 jqueryhtml

问题

我有一个总值(720),以及一个有值的选择器,当你选择一个它添加到720的东西时,例如我得到740.但如果我选择更高或更低的东西,它会增加到740而不是720.我发现了有关updateTotal的内容。但我只是愚弄了它,无法让它发挥作用。

所以我希望有人能告诉我如何做到这一点。谢谢 :)

我的html值输出:

<div class="SummaryRow">
  <h1><input type="yeets" name="_mdjm_event_cost" id="yett" class="mdjm-input-currency required" readonly="readonly" value="" placeholder="Totaal €0.00" style="
    height: 100px;
    width: 275px;
    margin-top: -40px;
    color: black;
    font-weight: bold;"/>
  </h1>
</div>

我的html选择器:

<select name="iFenceCorners" id="FenceCorners" class="AutosubmitCalculator" tabindex="3">
  <option value="0" selected="selected" data-price="00.00">Geen hoeken</option>
  <option value="1" data-price="20.00">1 hoek</option><option value="2" data-price="40.00">2 hoeken</option><option value="3" data-price="60.00">3 hoeken</option><option value="4" data-price="80.00">4 hoeken</option>
  <option value="5" data-price="100.00">5 hoeken</option><option value="6" data-price="120.00">6 hoeken</option><option value="7" data-price="140.00">7 hoeken</option><option value="8" data-price="160.00">8 hoeken</option>
  <option value="9" data-price="180.00">9 hoeken</option><option value="10" data-price="200.00">10 hoeken</option>
</select>

我的jquery:

$(document).ready(function(){
  base = 0;
  $("#FenceCorners").on("change", function() {
  var prev = $("#yett").val();
  prev = prev.split('€')[1];

    var total = (base * 100 + $(this).find(":selected").data("price") * 100) / 100; // selector HOEKEN
   total = parseInt(prev) + parseInt(total);
     $("#yett").val('Total €' + total.toFixed(2).replace(/\./g, ',')); // selector value added to total
  });

  $(function() {
    var begin = 720; // start value
    $("#yett").val('Total €' + begin.toFixed(2).replace(/\./g, ',')); // total value
  });
});

小提琴http//jsfiddle.net/z4v5r09s/

解决方法

1. begin每次使用变量为其添加新的选定值。

2. var base根本不需要。

$(document).ready(function() {
  var begin = 720;
  $("#yett").val('Total €' + begin.toFixed(2));
  $("#FenceCorners").on("change", function() {
    var prev = $("#yett").val();
    prev = prev.split('€')[1];

    var total = ($(this).find(":selected").data("price") * 100) / 100;
    total = parseInt(begin) + parseInt(total); //use begin
    $("#yett").val('Total €' + total.toFixed(2));
  });
});

工作小提琴: - http://jsfiddle.net/u69jyxkm/

问题

I have a total value(720), and a selector that has values, and when you select 1 thing it adds to the 720 so for example I get 740. But if i select something higher or lower it adds to the 740 and not the 720. I found stuff about updateTotal. But I just fooled around with that and couldn't get it to work.

So I hope someone could show me how this can be done. Thanks :)

My html value output:

<div class="SummaryRow">
  <h1><input type="yeets" name="_mdjm_event_cost" id="yett" class="mdjm-input-currency required" readonly="readonly" value="" placeholder="Totaal €0.00" style="
    height: 100px;
    width: 275px;
    margin-top: -40px;
    color: black;
    font-weight: bold;"/>
  </h1>
</div>

My html Selector:

<select name="iFenceCorners" id="FenceCorners" class="AutosubmitCalculator" tabindex="3">
  <option value="0" selected="selected" data-price="00.00">Geen hoeken</option>
  <option value="1" data-price="20.00">1 hoek</option><option value="2" data-price="40.00">2 hoeken</option><option value="3" data-price="60.00">3 hoeken</option><option value="4" data-price="80.00">4 hoeken</option>
  <option value="5" data-price="100.00">5 hoeken</option><option value="6" data-price="120.00">6 hoeken</option><option value="7" data-price="140.00">7 hoeken</option><option value="8" data-price="160.00">8 hoeken</option>
  <option value="9" data-price="180.00">9 hoeken</option><option value="10" data-price="200.00">10 hoeken</option>
</select>

My jquery:

$(document).ready(function(){
  base = 0;
  $("#FenceCorners").on("change", function() {
  var prev = $("#yett").val();
  prev = prev.split('€')[1];

    var total = (base * 100 + $(this).find(":selected").data("price") * 100) / 100; // selector HOEKEN
   total = parseInt(prev) + parseInt(total);
     $("#yett").val('Total €' + total.toFixed(2).replace(/\./g, ',')); // selector value added to total
  });

  $(function() {
    var begin = 720; // start value
    $("#yett").val('Total €' + begin.toFixed(2).replace(/\./g, ',')); // total value
  });
});

A fiddle: http://jsfiddle.net/z4v5r09s/

解决方法

1.Use begin variable each time for adding new selected value to it.

2.var base is not needed at all.

$(document).ready(function() {
  var begin = 720;
  $("#yett").val('Total €' + begin.toFixed(2));
  $("#FenceCorners").on("change", function() {
    var prev = $("#yett").val();
    prev = prev.split('€')[1];

    var total = ($(this).find(":selected").data("price") * 100) / 100;
    total = parseInt(begin) + parseInt(total); //use begin
    $("#yett").val('Total €' + total.toFixed(2));
  });
});

Working fiddle:-http://jsfiddle.net/u69jyxkm/

相似信息