javascript - 从数组中获取最后单击的项目的值

更新＃2:更新了脚本。
目标
a)用户选择一个按钮。单击的最后一个按钮的值+ .current__amount = new__amount b)没有运行总计。再次单击同一按钮应取消选择它，然后从.new__amount中减去该值，然后使用.html()更改占位符文本
问题
正确，现在无论出于何种原因，单击按钮都不会在.new__amount中添加或删除其值。
我已经使用console.log(buttons[i].value)和console.log(buttons[i].class)，可以看到for循环正在打印这六个按钮的类和值，这六个按钮代表无声拍卖$10, 25, 50中的出价，并已存储在名为var buttons = []的数组中，如我所愿。
scripts.js(已更新)
差不多好了。只需要使它一次只能选择一个按钮即可。

/*-------------------------------------
STEP ONE: PLACE BID
--------------------------------------*/

$.ajax({
    url: "https://sheetsu.com/apis/4a8eceba",
    method: "GET",
    dataType: "json"
}).then(function(spreadsheet) {

    // Print current bid
    var currentBid = spreadsheet.result.pop().Bids;
    $(".current__amount").html("$" +currentBid);

    $('.button__form').on('click', function() {
        var value = $(this).val();
        if($(this).hasClass('is-selected')) {
            $(this).removeClass('is-selected');
            $(".check--one").css("color", "#ccc");
            currentBid = parseInt(currentBid) - parseInt(value);
        }
        else {
            $(this).addClass('is-selected');
            $(".check--one").css("color", "#ffdc00");
            currentBid = parseInt(currentBid) + parseInt(value);
        }
        $('.total__amount').html("$" + currentBid);
    });
});

最佳答案

这并不是您的问题结构所特有的，但是它应该使您对它的工作方式有所了解。

$(document).ready(function() {
  var totalAmount = 0;
  $('.button__form').on('click', function() {
    var value = $(this).val();
    if($(this).hasClass('selected')) {
      $(this).removeClass('selected');
      totalAmount = parseInt(totalAmount) - parseInt(value);
    }
    else {
      $(this).addClass('selected');
      totalAmount = parseInt(totalAmount) + parseInt(value);
    }
    $('.total').html(totalAmount);
  });
});

.selected {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button__form" value=10>10</button>
<button class="button__form" value=25>25</button>
<button class="button__form" value=50>50</button>
<button class="button__form" value=100>100</button>
<button class="button__form" value=250>250</button>
<button class="button__form" value=500>500</button>
<br/><br/>
<div class="total"><div>

编辑，一次可以选择一个按钮:

$(document).ready(function() {
  var baseAmount = 0;
  var totalAmount = baseAmount;
  $('.button__form').on('click', function() {
    var value = $(this).val();
    if($(this).hasClass('selected')) {
      $(this).removeClass('selected');
      totalAmount = parseInt(totalAmount) - parseInt(value);
    }
    else {
      $('.button__form').removeClass('selected'); // remove selected css from all the other buttons
      $(this).addClass('selected');
      totalAmount = baseAmount; // reset the totalAmount to the original base amount
      totalAmount = parseInt(totalAmount) + parseInt(value);
    }
    $('.total').html(totalAmount);
  });
});

.selected {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button__form" value=10>10</button>
<button class="button__form" value=25>25</button>
<button class="button__form" value=50>50</button>
<button class="button__form" value=100>100</button>
<button class="button__form" value=250>250</button>
<button class="button__form" value=500>500</button>
<br/><br/>
<div class="total"><div>