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

时间：2015-12-11 20:30:01

标签： javascript jquery if-statement

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

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

我正在尝试修复的问题在于页面右栏上的表单按钮的if-else语句。向下滚动标题和导航以查看操作中的问题。 当我执行以下操作时会出现此问题：

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

最终目标

  • 如果未选择任何表单按钮，则“您的出价将为”下的数字应为三个超出---的字符串，以表示无值

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

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 = 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>

2 个答案:

答案 0 :(得分：2)

此问题与if / else条件无关。

问题是count up插件正在覆盖文本（因为在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语句内部，在 之前的<{em> 设置中的每个.reset()对象上使用count方法.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);
    });
  }
});

答案 1 :(得分：0)

The problem is simple: the countup method keeps running and updating the value even after you reset it to "---".

Fortunately, the solution is very simple as well. Add the following line before $('.total__amount').html("---"); :

if (count.typeof == "object") {   // just checking if the count object actually exists.
 count.pauseResume();
 count.reset();
}

In order for this to work you have to make the count object globally available. So change this line:

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

to this: (just remove "var")

  count = new CountUp("count", 0, totalAmount, 0, 1.5, options);

Compare here: http://www.w3schools.com/js/js_scope.asp

Then you should be good!

Note: The methods of the count object I derived from the countup.js file.

相关问题
最新问题