从数组中获取最后一次单击项的值

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>