Question

我第一次编写自己的javascript / jQuery for循环，我遇到了麻烦。

基本上，我有一系列div是空的，但是当点击一个按钮时，div会变成用户的输入字段。输入字段在一开始就存在，但是我使用CSS来隐藏它们并使用JS / jQuery来评估css属性并使它们在点击按钮时可见/隐藏。

我可以通过在7个输入字段中的每一个上放置一个id标签并手工写出jQuery来做到这一点，如下所示：

$('#tryBTN').click(function(){
 if ( $('#password').css('visibility') == 'hidden' )
      $('#password').css('visibility','visible');
 else
   $('#password').css('visibility','hidden');
}

复制/粘贴该代码7次并且只是交换div ID工作得很好，但是，为了更有效率，我知道有一种方法可以将它放在for循环中。

将此代码编写为测试，它在第一个上运行得很好：

$('#tryBTN').click(function() {
  for(i = 1; i <= 7; i++) {
    if($('#input1').css('visibility') == 'hidden')
      $('#input1').css('visibility', 'visible');
  }
});

但同样，这只适用于一个id。所以我将所有HTML id标签从唯一标签更改为id =＆＃34; intput1＆＃34; - 一直到七，这样我就可以用eval迭代标签。我想出了这个：

$('#tryBTN').click(function () {
    for (i = 1; i <= 7; i++) {
        if ($(eval('input' + i)).css('visibility') == 'hidden')
            $('input' + i).css('visibility', 'visible');
    }
});

当我输入评估的东西时 - 它不起作用。不确定我做错了什么。 HTML的示例如下所示：

<form>
    <div class="form-group">
        <label for="page">Description: Specifies page to return if paging is selected. Defaults to no paging.</label>
        <input type="text" class="form-control" id="input7" aria-describedby="page">
    </div>
</form>

Answer 1

您忘记了#：

$('#tryBTN').click(function () {
  for (i = 1; i <= 7; i++) {
    var el = $('#input' + i); // <-- The needed `#`
    if (el.css('visibility') == 'hidden') {
      el.css('visibility', 'visible');
    }
  }
});

Answer 2

@Intervalia's answer解释了您的代码中的简单错误（缺少#），并且注释解释了为什么您永远不应该使用eval()，除非您完全知道它是正确的这项工作的工具 - 非常罕见。

我想添加一个简化代码并使其更可靠的建议。

我建议不要在每个input元素上手动设置顺序ID，而是给它们一个共同的类。然后你可以让jQuery循环遍历它们，如果你添加或删除项目，你不必担心更新7。

此类可以是您在元素上已有的任何其他类的补充。我称之为showme：

<input type="text" class="form-control showme" aria-describedby="page">

现在您可以使用$('.showme')来获取包含具有此类的所有元素的jQuery对象。

如果你必须在每个匹配元素上运行一些逻辑，你可以使用.each()，如下所示：

$('#tryBTN').click( function() {
    $('.showme').each( function( i, element ) {
        if( $(element).css('visibility') == 'hidden' ) {
            $(element).css( 'visibility', 'visible' );
        }
    });
});

但在将元素更改为visibility:hidden之前，您无需检查元素是否有visibility:visible。您可以继续设置新值。因此，您可以将代码简化为：

$('#tryBTN').click( function() {
    $('.showme').each( function( i, element ) {
        $(element).css( 'visibility', 'visible' );
    });
});

现在我们在循环中做的唯一事情就是设置新的visibility，我们甚至不需要.each()，因为jQuery会为我们做循环当我们打电话给.css()时。（感谢@TemaniAfif提醒。）

所以代码变得非常简单：

$('#tryBTN').click( function() {
    $('.showme').css( 'visibility', 'visible' );
});

对于eval无效的循环

2 个答案: