如何使用 keyup 功能进行多种形式的输入

Posted 2023-05-09

【中文标题】如何使用 keyup 功能进行多种形式的输入

【英文标题】：How to use keyup function for multiple forms input

【发布时间】：2021-11-17 20:39:32

【问题描述】：

我的页面上有多个具有相同输入的表单。 我想从输入中获得一些价值。 现在我的代码只适用于第一个表单输入。

 $("#quantity").each(function () 
            var $final_price = $('#final_price');
            $("#quantity").on('keyup', function (e) 
                var quantity = parseFloat($(this).val());
                var product_price = parseFloat($("input[name='product_price']").val(), 10);
                $final_price.val(quantity * product_price);
            );
        );

编辑，工作代码：

    $(".ilosc").on('keyup', function (e) 
        var quantity = parseFloat($(this).val());
        var product_price = parseFloat($("input[name='product_price']").val(), 2);
        var final_price_input= $(this).closest("form").find(".final-price-rental-value");
        var final_price_value = (quantity * product_price).toFixed(2);
        var final_price_input_value = final_price_input.val(final_price_value);
    );

【问题讨论】：

Id 属性必须是唯一的。如果重复，则只有第一个元素会被 DOM 记住。尝试唯一的 ID 或类属性。

几乎可以正常工作。现在，当我在数量输入中更改第二种形式的值时，它会以第一种形式的最终价格乘以最终价格

同一问题$('#final_price') 只能引用单个输入。您需要使用相对 DOM 导航来找到正确的输入；没有您的 html，我们只能推测：$(this).closest("form").find(".final_price").val(...

这就是重点

【参考方案1】：

你的 HTML 应该是

<input type="number" name="quantity" class="quantity" required="required">

你的 javascript 应该是

$(".quantity").on('keyup', function (e) 
    var quantity = parseFloat($(this).val());
    var product_price = parseFloat($("input[name='product_price']").val(), 10);
    $final_price.val(quantity * product_price);
);

【讨论】：

几乎可以正常工作。现在，当我在数量输入中更改第二种形式的值时，它会以第一种形式的最终价格乘以最终价格

您需要保留其第一或第二或第三的指数，并根据该最终价格计算

【参考方案2】：

您的代码仅适用于第一个表单，因为您的目标是一个 id，即#quantity，而您是can only have one id per page。

你需要做的是使用类，例如：

$('.quantity').each(function(index, value) 
  var $input = $(value);
  console.log($input.val());
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <input type="text" class="quantity" value="232" />
</form>

<form>
  <input type="text" class="quantity" value="765" />
</form>

<form>
  <input type="text" class="quantity" value="987" />
</form>

【讨论】：

谢谢，工作正常。