对于循环，eval不起作用

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 =“intput1” - 一直到7，这样我就可以用eval迭代标签。我想出了这个：

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

当我输入eval的东西 - 它不起作用。不知道我做错了什么。 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()，因为当我们调用.css()时jQuery将为我们做循环。 （感谢@TemaniAfif提醒。）

所以代码变得非常简单：

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