создание jQuery-функций щелчка с циклом for - PullRequest
Новая
       13

создание jQuery-функций щелчка с циклом for

4 голосов
/ 09 июня 2011

Я пытаюсь создать функцию, которая добавляет дополнительное текстовое поле, когда пользователь нажимает кнопку. Это работает так, что на самом деле есть четыре текстовых поля и три кнопки. Три из четырех текстовых полей скрыты с помощью «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 после нажатия первой кнопки отображается только четвертое текстовое поле. Есть ли какая-то логика, которую я здесь не понимаю? Заранее спасибо.

Ответы [ 2 ]

13 голосов
/ 09 июня 2011

Ваша внутренняя функция имеет замыкание на внешнюю 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);
}
0 голосов
/ 09 июня 2011

Вы можете проверить это: 

$(':button').click(function(e) {
    var index = $(e.target).index();
    $('.add:eq(' + index + ')').hide();
    $('input:text:eq(' + (index + 1) + ')').show();
    $('.add:eq(' + (index + 1) + ')').show();
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...