Question

我希望根据输入中输入的字符数，span标签中的数字应该增加。我希望那个字符等于5。它可以工作，但是有点错误。

$(function() {
  var target = $('[data-field="target"]');

  $(document).on('input', '[data-field="item"]', function() {
    var item = $(this);
    var price = parseFloat($(".price").text());
    target.html(item.val().length * 5 + price);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form">
  <input type="text" data-field="item">
  <span data-field="target" class="price">60</span>
</form>

我要在输入的每个字符上实现的结果将增加到5。

例如：

60 +输入中的一个字符= 65;

60 +输入中的两个字符= 70;

以此类推...

Answer 1

问题是因为您在每次计算后都会更新使用的值。因此，您的起始数字呈指数增长。

要解决此问题，您需要一种存储和保存每次计算的起始图的方法。为此，您可以在data元素上使用.price属性，如下所示：

$(function() {
  var $target = $('[data-field="target"]');

  $(document).on('input', '[data-field="item"]', function() {
    var price = $(".price").data('starting-price');
    $target.html($(this).val().length * 5 + price);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form">
  <input type="text" data-field="item">
  <span data-field="target" class="price" data-starting-price="60">60</span>
</form>

Answer 2

我已经更新了您的代码。请参阅

$(function () {
    var target = $('[data-field="target"]');
    const price = 60;

    $(document).on('input', 'input[data-field="item"]', function () {
        var item = $(this);
        target.html(item.val().length * 5 + price);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form">
  <input type="text" data-field="item">
  <span data-field="target" class="price">60</span>
</form>

如何通过输入值增加数量？

2 个答案: