Javascript 根据两个输入的太阳光替换输入值

我想把已经有值的两个输入相加。如果其他两个输入值中的任何一个发生变化，我希望总和改变值。我有以下几点，但它不起作用：

<?php


while($row = mysqli_fetch_array($test)) {
echo "<tr class='saved_add'>";
echo "<td><input/></td>";
echo "<td><input/></td>";

echo "<td><select'>";
echo "<option value='service'";
if ($row['type'] == "service") {
echo "selected='selected'";}
echo ">Service</option>";
echo "<option value='hours'";
if ($row['type'] == "hours") {
echo "selected='selected'";}
echo ">Hours</option>";
echo "<option value='days'";
if ($row['type'] == "days") {
echo "selected='selected'";}
echo ">Days</option>";
echo "<option value='product'";
if ($row['type'] == "product") {
echo "selected='selected'";}
echo ">Product</option></select></td>";

echo "<td><input/></td>";
echo "<td><input/></td>";
echo "<td><input/></td>";
echo "<td><input/></td>";
echo "<td><input class='subtotal'/></td>";
echo "</tr>";
}


mysqli_close($con);
?>

有什么想法吗？

对元素调用

.val（）

时，它会以字符串形式返回其值。你必须先把它转换成一个数字，然后才能对它进行数学运算。要将字符串转换为整数，可以使用

parseInt（）

方法

$('.saved_add').each(function() {
  var sum = $('input:eq(2)', this).val() * $('input:eq(5)', this).val();
  $(".subtotal").text(sum);
});

---

大致如下：

function calculateSum() {
  $('.saved_add').each(function() {
    sum = $('input:eq(2)', this).val() * $('input:eq(5)', this).val();
    $(".subtotal").text(sum);
    });
  }

// On first load
calculateSum();

// On change
$("input").change(calculateSum);

代码仅在加载时计算值。您希望在加载和值更改时计算它，因此需要

.change（）

函数。

编辑、更新

试一试

---

jshiddle

谢谢大家的帮助，我明白了。帮助您将每个输入作为ID，以便您可以相应地更改它

HTML:

---

只是一个想法……打开调试器并调试它。jquery选择器是否解析为正确的元素？你在sum上有铸造问题吗？代码是否正在执行？这就是@malk它没有显示任何错误谢谢回答Francisco，但每条语句都是针对每个so$（“输入：eq（2），输入：eq（5）”）。更改（calculateSum）；不行。我没有看到你添加的html代码。但是，该点仍然有效，您需要在输入更改时更新它（编辑以显示通用方式），这也不会起作用，因为没有每条语句。我需要一个each语句，因为输入是动态创建的。感谢您的帮助，但这项工作适用于多个输入。“这项工作适用于多个输入。”？邮寄件/JSFIDLE返回OP提供的2个元素的产品。如果可能，请描述邮寄件的问题，要求的具体细节？谢谢

function calculateSum() {
  $('.saved_add').each(function() {
    sum = $('input:eq(2)', this).val() * $('input:eq(5)', this).val();
    $(".subtotal").text(sum);
    });
  }

// On first load
calculateSum();

// On change
$("input").change(calculateSum);

$('.saved_add').each(function(i, el) {   
    $(el).on("change", function() {
       // cast `sum` as `Number`
       sum = Number($('input:eq(2)', this).val() * $('input:eq(5)', this).val());
    $(".subtotal").text(sum);
}).change();
});

<div id="saved1">
    <input type="text" value="10" /><input type="text" value="10" /> <input type="text" value="10" />     
    <div id="subtotal1"></div>
</div>
<div id="saved2">
    <input type="text" value="10" /><input type="text" value="10" /> <input type="text" value="10" />     
    <div id="subtotal2"></div>
</div>

function calculateSum() {
  $("[id^=saved]").each(function() {
    sum = $('input:eq(0)', this).val() * $('input:eq(1)', this).val();
    $('input:eq(2)', this).val(sum);
    });
  }

// On first load
calculateSum();

// On change
$("input").change(calculateSum);