For循環不遍歷數組中的項目

Question

我在哪里

我希望遍歷數組中與按鈕的類及其相應值有關的項，以進行無聲拍賣。

當某人出價時，他們將看到最新的出價，然后單擊六個預定義值的按鈕之一$10, 25, 50, 100, 250, 500 .current__amount將采用該值，將其添加到.current__amount然后更改html()顯示.new__amount

問題

現在，單擊六個按鈕之一不會將值添加到.new__amount值中，而只是保留為占位符文本“ tk-amount”。因此，我想知道這是否是范圍問題，或者我的for循環構造是掉？

scripts.js

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

// Bid Options
var buttons = [
    { class: "buttonOne", value: 10 },
    { class: "buttonTwo", value: 25 },
    { class: "buttonThree", value: 50 },
    { class: "buttonFour", value: 100 },
    { class: "buttonFive", value: 250 },
    { class: "buttonSix", value: 500 }
]

$(".button__form").on('click', function(){
    var btnSelected = $(this).hasClass("is-selected");
    var sectionOneCompleted = $(".check--one").hasClass("is-completed");

    if (btnSelected) {
        $(this).removeClass("is-selected");
        $(".check--one").css("color", "#ccc");
    } else {
        $(".button__form").removeClass("is-selected");
        $(this).addClass("is-selected");
        $(".check--one").css("color", "#ffdc00");
    }
});

    /*-------------------------------------
    API: SHEETSU
    --------------------------------------*/

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


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

        // Any of the form buttons
        var $btnForm = $(".button__form");

        for(i = 0; i < buttons.length ; i++){
            if ($btnForm.hasClass(buttons[i].class)){
                var newBid = $(".new__amount").html("$" + (currentBid + buttons[i].value));
                console.log(newBid);
            }
        }
    });

我也嘗試使用此方法代替for循環，但收效甚微。

        buttons.forEach(function(button) {
            if ($btnForm.hasClass(button.class)){
              var newBid = $(".new__amount").html("$" + (currentBid + button.value));
              console.log(newBid);
            }

index.html

<div class="buttons">
    <button class="button__form button__one">$10</button>
    <button class="button__form button__two">$25</button>
    <button class="button__form button__three">$50</button>
    <button class="button__form button__four">$100</button>
    <button class="button__form button__five">$250</button>
    <button class="button__form button__six">$500</button>
</div><!-- /.buttons -->



<div class="bids__amounts">
    <div class="bids__amount bids__current">
        <p class="bids__note">The current bid is</p>
        <h4 class="current__amount">tk-amount</h4>
    </div>

    <div class="bids__amount bids__new">
        <p class="bids__note">Your bid will be</p>
        <h4 class="new__amount">tk-amount</h4>
    </div><!-- /.bids__amount -->
</div><!-- /.bids__amounts -->

小提琴： http : //jsfiddle.net/bqqLxvb9/

Answer 1

您的按鈕中沒有一個具有您在javascript中定義的類：

的JavaScript

var buttons = [
    { class: "buttonOne", value: 10 },
    { class: "buttonTwo", value: 25 },
    { class: "buttonThree", value: 50 },
    { class: "buttonFour", value: 100 },
    { class: "buttonFive", value: 250 },
    { class: "buttonSix", value: 500 }
]

的HTML

<div class="buttons">
    <button class="button__form button__one">$10</button>
    <button class="button__form button__two">$25</button>
    <button class="button__form button__three">$50</button>
    <button class="button__form button__four">$100</button>
    <button class="button__form button__five">$250</button>
    <button class="button__form button__six">$500</button>
</div>