时间戳

首页 > 解决方案 > 在javascript中第一次按键后onkeyup不起作用

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>

第二次按键后的问题，然后上面的代码正在运行，并且在控制台中显示未定义总价格。

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

标签： javascriptjqueryhtml

解决方案

问题是因为您声明了一个全局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>

推荐阅读