javascript - If-else 语句导致按钮出现问题

Question

更新 #1 - 澄清的问题，新的工作链接。

---

实时链接:https://s3.amazonaws.com/bsunproduction/auction/index.html

我试图解决的问题在于页面右栏中表单按钮的 if-else 语句。向下滚动到标题和导航栏以查看实际问题。 当我执行以下操作时出现问题:

• 单击一个表单按钮，单击另一个表单按钮，然后取消选择在 countup.js 完成之前单击的第二个按钮

最终目标

• 当没有选择任何表单按钮时，“您的出价将是”下的数字应该只是一串三个连字符 --- 表示没有值

• 相反，.new__amount 的数字倒计时并且 HTML 成为 totalAmount 的值，我不希望发生这种情况。

脚本.js

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

$.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);

  var baseAmount = 0;
  var totalAmount = baseAmount;

  $('.button__form').on('click', function() {
    var value = $(this).val();

    if ($(this).hasClass('is-selected')) {
      $(this).removeClass('is-selected');
      $(".check--one").css("color", "#ccc");
      $(".new__amount").css("margin-left", 10 + "px");
      $(".bids__dollar").addClass("is--hidden");
      totalAmount = parseInt(totalAmount) - parseInt(value);
      console.log("If");
      $('.total__amount').html("---");
    } else {
      $(".button__form").removeClass('is-selected');
      $(this).addClass('is-selected');
      $(".check--one").css("color", "#ffdc00");
      totalAmount = currentBid; // reset the totalAmount to base
      totalAmount = parseInt(totalAmount) + parseInt(value);
      console.log("Else");
      $('.total__amount').html("$" + totalAmount);
      $(".bids__dollar").removeClass("is--hidden");
      $(".new__amount").css("margin-left", 0 + "px");

      /*-------------------------------------
      COUNTUP
      --------------------------------------*/

      $(function() {
        var options = {  
          useEasing: true,
            useGrouping: true,
            separator: '',
            decimal: '',
            prefix: '',
            suffix: ''
        };

        var count = new CountUp("count", 0, totalAmount, 0, 1.5, options);
        count.start();
      });
    }
  });
});

index.html(只有按钮)

<div class="bids__step bids--one">
  <h2>Step One</h2>
  <div class="bids__checkmark">
    <i class="fa fa-check check--one"></i>
  </div>

  <p class="bids__note">Pick one of the amounts below to add to the current bid.</p>
  <div class="buttons">
    <button class="button__form button__one" value="10">$10</button>
    <button class="button__form button__two" value="25">$25</button>
    <button class="button__form button__three" value="50">$50</button>
    <button class="button__form button__four" value="100">$100</button>
    <button class="button__form button__five" value="250">$250</button>
    <button class="button__form button__six" value="500">$500</button>
  </div>
  <!-- /.buttons -->

  <div class="bids__amounts">
    <div class="bids__amount bids__current">
      <p class="bids__note">The last bid was</p>
      <h4 class="current__amount">---</h4>
    </div>

    <div class="bids__amount bids__new">
      <p class="bids__note">Your bid will be</p>
      <h4 class="bids__dollar is--hidden">$</h4>
      <h4 class="new__amount total__amount" id="count">---</h4>
    </div>
    <!-- /.bids__amount -->
  </div>
  <!-- /.bids__amounts -->
</div>

Answer 1

问题与 if/else 条件无关。

问题是计数插件正在覆盖文本(因为在 if/else 条件中设置文本后它仍在执行)。

根据CountUp.js documentation , .start() 方法接受一个函数作为回调，动画结束时执行。

因此，最简单的解决方法是检查回调中是否有任何选定的按钮元素。如果没有任何被选中的元素，则将.total__amount的文本设置为---:

var count = new CountUp("count", 0, totalAmount, 0, 1.5, options);
count.start(function() {
  if ($('.button__form.is-selected').length === 0) {
    $('.total__amount').text("---");
  }
});

---

或者，您也可以创建一个包含 count 个对象的数组。

在下面的代码片段中，有一个 counterArray 数组，其中包含每个 count 对象。

在 if 语句中，对数组 中的每个 count 对象使用 .reset() 方法em>在将 .total__amount 的文本设置为 --- 之前:

counterArray.forEach(function (count) {
  if (count && count.reset) {
    count.reset();
  }
});

$('.total__amount').text("---");

这是相关代码和一个working example here .

_{(为简洁起见删除了不相关的代码)}

var baseAmount = 0;
var totalAmount = baseAmount;
var counterArray = [];

$('.button__form').on('click', function() {
  if ($(this).hasClass('is-selected')) {
    // ....

    counterArray.forEach(function (count) {
      if (count && count.reset) {
        count.reset();
      }
    });

    $('.total__amount').text("---");
  } else {
    // ....

    $(function() {
      var options = {};
      var count = new CountUp("count", 0, totalAmount, 0, 1.5, options);
      count.start();
      counterArray.push(count);
    });
  }
});