Question

我正在尝试根据所选数量计算总价格输出。即使不理想，因为我宁愿计算基于显示的实际数量而不是其增加/减少按钮，onclick事件现在将输出延迟1。

E.g。让我们说一朵花的价格是7.99美元。在更改为15.98之前，我必须单击增量按钮3次。减小按钮在相反方向上的作用相同，因此当我减少数量时，我突然落后于一个计算。希望这是有道理的。

以下是相关的代码位：

＆＃13;

$(".incr-btn_mobile").on("click", function(e) {
  var $button = $(this);
  var oldValue = $button.parent().find('.quantity').val();
  $button.parent().find('.incr-btn_mobile[data-action="decrease"]').removeClass('inactive');
  if ($button.data('action') == "increase") {
    var newVal = parseFloat(oldValue) + 1;
  } else {
    // Don't allow decrementing below 1
    if (oldValue > 1) {
      var newVal = parseFloat(oldValue) - 1;
    } else {
      newVal = 1;
      $button.addClass('inactive');
    }
  }
  $button.parent().find('.quantity').val(newVal);
  
  e.preventDefault();

});




function calculateTotal()
{
    //Here we get the total price by calling our function
    //Each function returns a number so by calling them we add the values they return together
    var cakePrice = document.getElementById('ShowButton_value_1_0_mobile').value
    ;
    
    //display the result
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = "= $"+(cakePrice)*7.99;

}

＆＃13;

.count-input_mobile {
  position: relative;
  max-width: 1000%;
  max-width: 400px;
  margin: 0px 0;
}

.count-input_mobile input {
  width: 100%;
  height: 36.92307692px;
  border: 1px solid #000 border-radius: 2px;
  background: none;
  text-align: center;
}

.count-input_mobile input:focus {
  outline: none;
}

.count-input_mobile .incr-btn_mobile {
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  font-size: 26px;
  font-weight: 300;
  text-align: center;
  line-height: 30px;
  top: 50%;
  right: 0;
  margin-top: -15px;
  text-decoration: none;
}

.count-input_mobile .incr-btn_mobile:first-child {
  right: auto;
  left: 0;
  top: 46%;
}

.count-input_mobile.count-input-sm {
  max-width: 125px;
}

.count-input_mobile.count-input-sm input {
  height: 36px;
}

.count-input_mobile.count-input-lg {
  max-width: 200px;
}

.count-input_mobile.count-input-lg input {
  height: 70px;
  border-radius: 3px;
}

.button_mobile {
  border: 1px solid #000;
  border-radius: 2px;
  background: none;
  padding: 10px 32px;
  width: 100%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="count-input_mobile space-bottom">
  <a class="incr-btn_mobile" data-action="decrease" onclick="calculateTotal()" href="#">–</a>
  <input class="quantity" id="ShowButton_value_1_0_mobile" type="text" name="quantity" value="1" />
  <a class="incr-btn_mobile" data-action="increase" onclick="calculateTotal()" href="#">+</a>
</div>

<td>
  <div id="totalPrice">=$7.99</div>
</td>

＆＃13;

Answer 1

正在发生的事情是calculateTotal正在.on("click"之前执行，因此它会选择旧值。

实际上你不需要这两个独立的功能。您可以将以下代码（calculateTotal）放在.on("click"。

中

  var cakePrice = newVal;
  var divobj = document.getElementById('totalPrice');
  divobj.style.display = 'block';
  divobj.innerHTML = "= $" + (cakePrice) * 7.99;
  e.preventDefault();

下面的工作代码。

$(".incr-btn_mobile").on("click", function(e) {
  var $button = $(this);
  var oldValue = $button.parent().find('.quantity').val();
  $button.parent().find('.incr-btn_mobile[data-action="decrease"]').removeClass('inactive');
  if ($button.data('action') == "increase") {
    var newVal = parseFloat(oldValue) + 1;
  } else {
    // Don't allow decrementing below 1
    if (oldValue > 1) {
      var newVal = parseFloat(oldValue) - 1;
    } else {
      newVal = 1;
      $button.addClass('inactive');
    }
  }
  $button.parent().find('.quantity').val(newVal);

  var cakePrice = newVal;
  var divobj = document.getElementById('totalPrice');
  divobj.style.display = 'block';
  divobj.innerHTML = "= $" + (cakePrice) * 7.99;
  e.preventDefault();


});

.count-input_mobile {
  position: relative;
  max-width: 1000%;
  max-width: 400px;
  margin: 0px 0;
}

.count-input_mobile input {
  width: 100%;
  height: 36.92307692px;
  border: 1px solid #000 border-radius: 2px;
  background: none;
  text-align: center;
}

.count-input_mobile input:focus {
  outline: none;
}

.count-input_mobile .incr-btn_mobile {
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  font-size: 26px;
  font-weight: 300;
  text-align: center;
  line-height: 30px;
  top: 50%;
  right: 0;
  margin-top: -15px;
  text-decoration: none;
}

.count-input_mobile .incr-btn_mobile:first-child {
  right: auto;
  left: 0;
  top: 46%;
}

.count-input_mobile.count-input-sm {
  max-width: 125px;
}

.count-input_mobile.count-input-sm input {
  height: 36px;
}

.count-input_mobile.count-input-lg {
  max-width: 200px;
}

.count-input_mobile.count-input-lg input {
  height: 70px;
  border-radius: 3px;
}

.button_mobile {
  border: 1px solid #000;
  border-radius: 2px;
  background: none;
  padding: 10px 32px;
  width: 100%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="count-input_mobile space-bottom">
  <a class="incr-btn_mobile" data-action="decrease" href="#">–</a>
  <input class="quantity" id="ShowButton_value_1_0_mobile" type="text" name="quantity" value="1" />
  <a class="incr-btn_mobile" data-action="increase" href="#">+</a>
</div>

<td>
  <div id="totalPrice">=$7.99</div>
</td>

由onclick事件尾随1个事件后触发的.innerHTML输出

1 个答案: