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

Posted 2023-05-08

【中文标题】如何将 i 从 for 循环传递到 jquery 中的 id 标签？

【英文标题】：How to get pass the i from a for loop to the id tag in jquery?

【发布时间】：2021-08-15 01:36:25

【问题描述】：

正如您在此处看到的，我有一些具有不同 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”？

【问题讨论】：

$(document).ready( 不属于循环内。如果您使用let 或const 而不是var，则i 的值将被保留。但是，您根本不需要循环，这也可以消除问题。

试试"#cell"+i

我认为您的意思是$("#cell" + i)，使用+ 而不是,，但正如@KevinB 所说，您不需要循环。相反，只需更改 html 以使用 min 和 max 属性。

@HereticMonkey 因为我有很多单元格，所以很难为所有单元格添加最小值和最大值。这就是为什么我一直在寻找另一种解决方案

【参考方案1】：

几件事。你可能想要这个选择器 - id 以单元格开头

$(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>

【讨论】：

@mplungjan 感谢您的解决方案有效。但据我了解， $("[id^=cell]") 将获取所有单元格。如果我想在特定单元格上做点什么，我该怎么做？ （因为我有很多单元格，我不能只做 $("#col3") 例如）

它将获取ID以cell开头的所有cell。这就是我期望你想要的。如果没有，请更新您的问题

【参考方案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>