【问题标题】：Changing value of input based on another input box and multiplied currency根据另一个输入框和相乘的货币更改输入值
【发布时间】：2015-01-08 20:48:15
【问题描述】：

我正在尝试将输入框的值设置为另一个输入框的值乘以商品的价格。我将货币包裹在一个带有类的跨度标签中。我需要将该值乘以.productTextInput 输入文本框。该值将显示在.subTotal 框中。我该如何做到这一点？

jQuery:

$(".productTextInput").each(function() {
    $(this).change(function() {
        var priceAmount = $(this).parents().find(".priceAmount").text();

        $(this).parents().find(".subTotal").val(parseInt($(this).val(), 10) * parseInt(priceAmount, 10));
    });
});

html:

<table class="productTable productSmall" cellspacing="0">
    <tbody>
        <tr>
            <td style="width: 27%;">
               <strong>American (wild) plum</strong>
            </td>
            <td class="custom-tag"></td>
            <td class="custom-tag">
                Prunus americana
            </td>
            <td class="custom-tag">
                Bare Root
            </td>
            <td class="custom-tag" style="border-right: 2px solid #000;">
                2' - 3' size
            </td>
            <td style="text-align:right;padding-right: 10px;">
                $<span class="priceAmount">1.75</span>
            </td>
            <td class="quantity">
                <input id="Units_4996263" class="productTextInput" name="AddToCart_Amount" value="1" type="text">
            </td>
            <td>
                <input class="subTotal" name="subTotal" readonly="readonly" type="text">
            </td>
       </tr>
   </tbody>
</table>

【问题讨论】：

这不是您问题的完整答案，但您没有关闭输入标签。应该是<input id="id" /> /
@wahwahwah 如果您不这样做，这实际上不会影响任何事情。很好的建议，因为最好在语法上保持一致，但如果缺少 HTML，HTML 将无错误地呈现。请参阅stackoverflow.com/questions/13232121/… 以更好地理解。
@wahwahwah 这是由于系统通过标签生成的输入。我没有包含标签，因为它没有意义。不过感谢您的提醒。

标签： javascript jquery html

【解决方案1】：

在priceAmount 上使用parseFloat。 parseInt 返回一个整数（去除小数）。 parseFloat 保留小数。

由于 parseInt，在您当前的代码中，priceAmount 始终为 1。

改为：

$(this).parents().find(".subTotal").val(parseInt($(this).val(), 10) * parseFloat(priceAmount));

【讨论】：

【解决方案2】：

如果你想要一个带小数的数字，你应该使用parseFloat 而不是parseInt。

您还应该删除您正在调用的 each 函数：

$(".productTextInput").each(function() {
   $(this).change(function() {

只需使用click 函数，$(this) 将引用点击的元素。您可以将代码简化为以下内容：

$(".productTextInput").change(function() {

     var priceAmount = parseFloat($(this).closest("tr").find(".priceAmount").text());

     $(this).closest("tr").find(".subTotal").val(parseInt($(this).val()) * priceAmount)  

});

FIDDLE

【讨论】：

如果 OP 正在建立一个网上商店并且有多个产品输入怎么办？ Each 为每个输入提供一个更改处理程序。
对，假设他们在自己的表格行中，这将做到这一点。如果您正确指定目标，则不需要each 循环：EXAMPLE
我选择了这个答案，因为它是正确的，我喜欢它的方法。谢谢！

【解决方案3】：

您不需要对此使用.each，因为$('.productTextInput') 会查找具有提供的类的每个元素。

我确实在 sn-p 中省略了 parseInt/parseFloat，但 JSFiddle 有它。 http://jsfiddle.net/6qf7oc55/3/

$('.productTextInput').blur(function() {
    num = this.value;
    price = $(this).closest('tr').find('.priceAmount').text();
    sub = num * price;
    $('.subTotal').val(sub.toFixed(2));
});

【讨论】：