从数组中获取最后点击项目的值

Question

更新 #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);
    });
});

Answer 1

这并不是特定于您的问题结构，但它应该让您了解它是如何工作的。

$(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>