如何将 i 从 for 循环传递到 jquery 中的 id 标记？

Question

我有一些不同 ID 的输入，正如您在下面看到的那样

<tr>

    <td><input type="number" id="cell1" ></td>
    <td><input type="number" id="cell2" ></td>
    <td><input type="number" id="cell3" ></td>



    <td><input type="number" id="cell4"></td>
    <td><input type="number" id="cell5"></td>
    <td><input type="number" id="cell6"></td>



    <td><input type="number" id="cell7" ></td>
    <td><input type="number" id="cell8" ></td>
    <td><input type="number" id="cell9" ></td>

</tr>

现在我想使用 jquery 来限制用户在输入中输入的数字，类似这样

for(var i = 0 ; i <= 81 ; i++) {


    $(document).ready(function () {
        $("#cell" , i).change(function () {

            var n = $("#cell",i).val();
            console.log($("#cell", i));
            if (n < 1)
                $("#cell", i).val(1);
            if (n > 9)
                $("#cell" , i).val(9);
        });
    });

}

但它没有获取 ID。如何将 i 变量传递给“#cell”？

Answer 1

几件事。您可能需要此选择器 - id 以 cell

开头

$(function() {
  $("[id^=cell]").on("input",function() {
    const val = this.value
    if (val < 0) this.value = 1
    if (val > 0) this.value = 9
  });
});

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

      <td><input type="number" id="cell1"></td>
      <td><input type="number" id="cell2"></td>
      <td><input type="number" id="cell3"></td>



      <td><input type="number" id="cell4"></td>
      <td><input type="number" id="cell5"></td>
      <td><input type="number" id="cell6"></td>



      <td><input type="number" id="cell7"></td>
      <td><input type="number" id="cell8"></td>
      <td><input type="number" id="cell9"></td>

    </tr>

  </tbody>
</table>

HTML版本

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

      <td><input type="number" id="cell1" min=1 max=9></td>
      <td><input type="number" id="cell2" min=1 max=9></td>
      <td><input type="number" id="cell3" min=1 max=9></td>
      <td><input type="number" id="cell4" min=1 max=9></td>
      <td><input type="number" id="cell5" min=1 max=9></td>
      <td><input type="number" id="cell6" min=1 max=9></td>
      <td><input type="number" id="cell7" min=1 max=9></td>
      <td><input type="number" id="cell8" min=1 max=9></td>
      <td><input type="number" id="cell9" min=1 max=9></td>

    </tr>

  </tbody>
</table>

Answer 2

首先，将循环移动到 $document.ready

然后只需将 i 附加到 id 前缀即可为单元格创建正确的 querySelector。

虽然它没有回答您的问题，但您也可以使用 min and max 属性来完成您的任务。

这是附加循环计数器的工作示例 i。

// create 81 inputs for demo purposes
$(document).ready(function () {
  var row= $('#myrow');
  for(var i = 0 ; i <= 81 ; i++)
  {
    row.append($('<td/>').append('<input type="number" />').attr("id", "cell" + i));
  }
});

$(document).ready(function () {
  for(var i = 0 ; i <= 81 ; i++) {
$("#cell"+ i).change(function (e) {
  var input= $(e.target);
  var n = input.val();
  if (n < 1)
    input.val(1);
  else if (n > 9)
    input.val(9);               
  });
 }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<table>
<tr id='myrow'>
</tr>
</table>

如何将 i 从 for 循环传递到 jquery 中的 id 标记？

How to get pass the i from a for loop to the id tag in jquery?

html

javascript

css

jquery

jquery-ui