javascript - 第一次按下javascript后，onkeyup无法正常工作

所以我有一些输入字段。因此，用户在此基础上键入数量，从而计算价格并显示总价。例如。如果一件商品的价格为$ 500，则2件商品的价格为500 * 2 = 1000（总价）。因此，每次用户按下键时我都希望输入。

该部分工作正常，但仅在第一次按键后才起作用，此后它不起作用。下面的代码我已经尝试过了。

<?php foreach ($offer_details as $key => $offer_detail) {
  <input class="quantity" min="0" name="quantity" type="number" id="quantity-<?php echo $key; ?>" onkeyup="total_price(<?php echo $key; ?>)" max="<?php echo $units; ?>">
<?php }?>
<script type="text/javascript">
    function total_price(i){
      var quantity = parseInt(document.getElementById("quantity-" + i).value);
      if (isNaN(quantity)) {
            quantity = 0;
        }
        var sell_plants = $("#sell_plants").text();
        if (quantity >= sell_plants) {
            quantity = sell_plants;
        }
        $("#quantity-" + i).val(quantity);
        var price_per_one = $("#price_per_one").text();
        var base_currency_symbol = $("#base_currency_symbol").val();
        price_per_one = price_per_one.replace(base_currency_symbol, "");
        total_price = price_per_one * quantity;
        if(total_price == '' || typeof(total_price) == 'undefined' || isNaN(total_price)){
          total_price = 0;
        }
        $("#total_price-" + i).val(base_currency_symbol + ' ' + total_price);
    }
</script>

第二次按键后，上面的代码将起作用，并且在控制台中显示的是total_price的问题未定义。

任何帮助将不胜感激。提前致谢。

最佳答案

问题是因为您声明了一个全局total_price变量，该变量重新分配了对total_price()函数的引用。

要解决此问题，请重命名该变量，例如：

var tp = price_per_one * quantity;
if (tp == '' || typeof(tp) == 'undefined' || isNaN(tp)) {
  tp = 0;
}
$("#total_price-" + i).val(base_currency_symbol + ' ' + tp);

请注意，您可以通过强制值来简化逻辑，也可以通过使用jQuery的遍历方法来避免使用增量ID，例如：

$('.quantity').on('input change', function() {
  var $qty = $(this);
  var $row = $qty.closest('.row');
  var quantity = parseInt(this.value, 10) || 0;
  var sell_plants = parseInt($("#sell_plants").text(), 10) || 0;

  if (quantity >= sell_plants)
    quantity = sell_plants;

  $qty.val(quantity);

  var base_currency_symbol = $("#base_currency_symbol").val();
  var price_per_one = $row.find('.price_per_one').text().replace(base_currency_symbol, "");
  var total = (price_per_one * quantity) || 0;
  $row.find('.total').val(base_currency_symbol + ' ' + total.toFixed(2));
});

.price_per_one {
  width: 60px;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sell_plants">5</div>
<input readonly type="text" id="base_currency_symbol" value="$" />

<br /><br />
<div class="row">
  <input class="quantity" min="0" name="quantity" type="number" max="100" />
  <span class="price_per_one">$2.50</span>
  <input type="text" readonly class="total" />
</div>
<div class="row">
  <input class="quantity" min="0" name="quantity" type="number" max="100" />
  <span class="price_per_one">$5.00</span>
  <input type="text" readonly class="total" />
</div>
<div class="row">
  <input class="quantity" min="0" name="quantity" type="number" max="100" />
  <span class="price_per_one">$12.50</span>
  <input type="text" readonly class="total" />
</div>

关于javascript - 第一次按下javascript后，onkeyup无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55417069/