如何将文本框值附加到最近的跨度？

Question

我正在使用jQuery数据表，并希望对其应用计算，很难这样做，我想将textbox的值附加到不可见的跨度。我怎样才能做到这一点？使用以下代码，它只在1个相同ID的文本框上工作，我想在同一个id的所有文本框上应用。

$('td').each(function() {
  $("input").keyup(function() {
    var txtvalue = $('#curr_sales').val();
    $("#curr").closest('span').text(txtvalue);
    console.log(txtvalue);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="number" id="curr_sales" size="5" name="curr_sales" placeholder="Current Sales" required><span id="curr"></span></td>
<td><input type="number" id="curr_sales" size="5" name="curr_sales" placeholder="Current Sales" required><span id="curr"></span></td>
<td><input type="number" id="curr_sales" size="5" name="curr_sales" placeholder="Current Sales" required><span id="curr"></span></td>
</tr></table>

Answer 1

ID必须是唯一的，它们无法回收已存在的ID。请改用classes

此外，要将结果输出到最近的<span>，请转到父级，然后从<span>中找到<tr>个孩子。

此外，如果需要，您可以使用on()功能将多个事件绑定到<input>。

输出

代码段

＆＃13;

＆＃13;

$('td').each(function() {
  $("input").on("keyup blur", function() {
    var txtvalue = $(this).val();
    $(this).parent().find('span').text(txtvalue);
    console.log(txtvalue);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="number" class="curr_sales" size="5" name="curr_sales" placeholder="Current Sales" required><span class="curr"></span></td>
    <td><input type="number" class="curr_sales" size="5" name="curr_sales" placeholder="Current Sales" required><span class="curr"></span></td>
    <td><input type="number" class="curr_sales" size="5" name="curr_sales" placeholder="Current Sales" required><span class="curr"></span></td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我强烈建议您阅读Decoupling Your HTML, CSS, and JavaScript。

我会完全重写（下面的例子）。定位ID是有问题的，因为你只能有一个带有和id的html元素，这使得jQuery不可重用。定位span也会使jQuery代码变得脆弱，因为其他人出现并将跨度更改为div并且jQuery停止工作。

$(document).ready(function() {
  $(".js-populate-target").on('keyup change', function() {
    var txtvalue = $(this).val();
    var selector = $(this).data('populate-target');
    $(this).closest('.js-populate-container').find(selector).text(txtvalue);
    console.log(txtvalue);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <table>
    <tr>
      <td class="js-populate-container">
        <input type="number" size="5" name="curr_sales" placeholder="Current Sales" required class="curr_sales js-populate-target" data-populate-target=".js-populator">
        <span class="js-populator"></span>
      </td>
      <td class="js-populate-container">
        <input type="number" size="5" name="curr_sales" placeholder="Current Sales" required class="curr_sales js-populate-target" data-populate-target=".js-populator">
        <span class="js-populator"></span>
      </td>
      <td class="js-populate-container">
        <input type="number" size="5" name="curr_sales" placeholder="Current Sales" required class="curr_sales js-populate-target"  data-populate-target=".js-blah">
        <span class="js-blah"></span>
      </td>
    </tr>
  </table>

通过将目标放在数据字段中，您现在可以具体说明每个项目定位哪些元素。