Question

我有一个包含input字段的2行表，当我将注意力集中在第一个输入上时会进行计算。我遇到的问题是，当我将注意力集中在第二行时，新值显示在与input相对应的第一行中。我不确定为什么会这样。非常感谢您的帮助。

我的期望是，当我在行输入（成本）和focusout中输入值时，应在输入（新成本）的同一行中设置新值。

function Calculate(element) {
  var dollar = 216.98;
  var id = element.id;
  var oldcost = $(element).val();
  var newcost = oldcost * dollar;
  $("#" + id).closest("tr").find("td #new").val(newcost);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Cost</th>
    <th>New Cost</th>
  </tr>
  <tr>
    <td><input type="number" id="old" onfocusout="Caluculate(this)" /></td>
    <td><input type="number" new="new" /></td>
  </tr>
  <tr>
    <td><input type="number" id="old" onfocusout="Caluculate(this)" /></td>
    <td><input type="number" new="new" /></td>
  </tr>
</table>

Answer 1

这里有几个问题。首先，您要重复无效的同一id属性；它们必须是唯一的。我建议改用class。其次，没有new属性。我认为这是一个错字，应该是id，但是再次看到我的第一点。

接下来，您定义的函数被命名为Calculate()，但调用是Caluculate()。

然后，您还应该使用不显眼的事件处理程序，因为on*事件属性非常过时，应尽可能避免使用。由于您已经在页面中包含了jQuery，因此可以使用on()方法。 input事件似乎也更适用于您的用法，特别是考虑到它还可以捕获数字控件上的上/下箭头用法，尽管您可以根据需要将其更改为blur。 / p>

最后，只需修改DOM遍历逻辑即可使用新类，就像这样：

var dollar = 216.98;

$('.old').on('input', function() {
  var oldcost = $(this).val();
  var newcost = oldcost * dollar;
  $(this).closest("tr").find(".new").val(newcost);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Cost</th>
    <th>New Cost</th>
  </tr>
  <tr>
    <td><input type="number" class="old" /></td>
    <td><input type="number" class="new" /></td>
  </tr>
  <tr>
    <td><input type="number" class="old" /></td>
    <td><input type="number" class="new" /></td>
  </tr>
</table>

Answer 2

它们具有相同的ID。您需要更改ID

Answer 3

首先，有一个错字。将caluculate更改为calculate
不能有相同的id两个元素具有相同的id。您可以将第一个元素的ID更改为old-1或不同的内容

Answer 4

您对id的使用有点混乱。首先，请确保在整个HTML文件中使用一次ID。为了您的用例，最好使用类。

还请确保您输入的函数名称正确；）

function Calculate(element) {
  var dollar = 216.98;
  var parent = $(element).closest('tr');
  var oldcost = $(element).val();
  var newcost = oldcost * dollar;
  parent.find(".new").val(newcost.toFixed(2));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Cost</th>
    <th>New Cost</th>
  </tr>
  <tr>
    <td><input type="number" class="old" onfocusout="Calculate(this)" /></td>
    <td><input type="number" class="new" /></td>
  </tr>
  <tr>
    <td><input type="number" class="old" onfocusout="Calculate(this)" /></td>
    <td><input type="number" class="new" /></td>
  </tr>
</table>

值未在正确输入中显示

4 个答案: