Question

我正在尝试创建一个在用户单击按钮时添加其他文本字段的功能。它的工作方式是实际上有四个文本字段和三个按钮。使用“display：none”隐藏四个文本字段中的三个，并隐藏三个按钮中的两个。单击按钮1时，显示文本字段2和按钮2，单击按钮2时，文本字段3和按钮3显示，依此类推。这可以通过手动输入代码来管理，但在必须创建许多文本字段时会成为负担。到目前为止，我已经使用了这段代码：

<html>
<head>
<style type="text/css">
.hide {display:none;}
</style>


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">


$(document).ready(function(){


$("#add"+2 ).click(function(){
$("#add"+2).hide();
$("#text"+2).show();
$("#add"+3).show();
  });
$("#add"+3 ).click(function(){
$("#add"+3).hide();
$("#text"+3).show();
$("#add"+4).show();
  });

$("#add"+4 ).click(function(){
$("#add"+4).hide();
$("#text"+4).show();

  });


});

</script>

</head>
<body><div id="border">
<form action="" method="post">

<table>
<tr>
<td>
<input type="text" id="text1" name="text1" />
</td>
<td>
<input type="button" id="add2"  name="add" value="add another field" />
<input type="button" id="add3" class="hide" name="add" value="add another field" />
<input type="button" id="add4" class="hide" name="add" value="add another field" />
</td>
</tr>
<tr>
<td>
<input type="text" id="text2" class="hide" name="text2" /><br>
<input type="text" id="text3" class="hide" name="text3" /><br>
<input type="text" id="text4" class="hide" name="text4" />
<td>
</tr>
</table>

</form>
</div>
</body>
</html>

然后我替换了

    $("#add"+2 ).click(function(){
    $("#add"+2).hide();
    $("#text"+2).show();
    $("#add"+3).show();
      });
    $("#add"+3 ).click(function(){
    $("#add"+3).hide();
    $("#text"+3).show();
    $("#add"+4).show();
      });

使用for循环尝试做同样的事情

var i = 2;
for (i=2; i<=3; i++)
{
 $("#add"+i ).click(function(){
        $("#add"+i).hide();
        $("#text"+i).show();
        $("#add"+(i+1)).show();
          });
}

用for循环替换后，单击第一个按钮后只显示第四个文本字段。有什么逻辑我不明白吗？提前谢谢。

Answer 1

你的内部函数有一个外部i的闭包，所以当它访问i时，它会访问变量本身，而不是它的值。

您可以使用自执行函数将其分解并将值传递给新的局部变量。

var i = 2;
for (i = 2; i <= 3; i++) {

    (function(j) {
        $("#add" + j).click(function() {

            $("#add" + j).hide();
            $("#text" + j).show();
            $("#add" + (j + 1)).show();
        });

    })(i);
}

Answer 2

您可以测试一下：

$(':button').click(function(e) {
    var index = $(e.target).index();
    $('.add:eq(' + index + ')').hide();
    $('input:text:eq(' + (index + 1) + ')').show();
    $('.add:eq(' + (index + 1) + ')').show();
});

使用for循环创建jquery单击函数

2 个答案: