键入时如何为动态生成的输入添加动态值？

Question

我正在编写一个小型应用程序，允许用户编写测试考试题和多项选择答案。 我试图捕获每个选择选项值作为用户类型，并将该值附加到单选按钮。 因此，如果用户在第一个输入中输入“红色”，则第一个单选框输入值应为“红色”。

小提琴： http : //jsfiddle.net/a2s1t7b3/3/

到目前为止，这就是我所拥有的。

 $(document).ready(function() { var numberofchoices = '<br><label for="inputEmail">Number of Choices</label>\\n\\ <input id="noc" required="required" placeholder="Enter number of choices" type="text" value="" class="form-control">'; $('#nop').html(numberofchoices); $(document).on('keyup', '#noc', function() { var numberofchoices = $('#noc').val(); var i = 0; var len = numberofchoices; var alphabetUpperCase = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; if ($('#answers_choices').html() !== '') { $('#answers_choices').html(''); $('#answers_correct_choices').html(''); $('#select_question_answer').hide(); } if (numberofchoices !== '') { for (i = 1; i <= len; i++) { if (numberofchoices >= 1 && numberofchoices <= 26) { $('#answers_choices').append('<br><label> Option ' + alphabetUpperCase[i - 1] + '</label><input id="choice' + alphabetUpperCase[i - 1] + '" required="required" name="answer_choices" placeholder="Enter choice ' + alphabetUpperCase[i - 1] + '" type="text" value="" class="form-control">') } //radio boxes answers var radiobox = '<input id="answerchoice' + alphabetUpperCase[i - 1] + '" type="radio" name="multiple_choice_single_answer" value="">' + alphabetUpperCase[i - 1] + '&nbsp;&nbsp;&nbsp;'; if (numberofchoices >= 1 && numberofchoices <= 26) { $('#select_question_answer').show(); $('#answers_correct_choices').append(radiobox); } $(document).on('keyup', '#choice' + alphabetUpperCase[i - 1], function() { //alert('#choice'+alphabetUpperCase[i-1]); $('#answerchoice' + alphabetUpperCase[i - 1]).val($(this).val()); }); } } }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group" id="nop"></div> <div class="form-group" id="answers_choices"></div> <label id="select_question_answer" style="display: none;">Select Question Answer(s)</label> <div class="form-group" id="answers_correct_choices"></div> 

Answer 1

您正在循环中引用一个外部作用域中的变量的新函数。 jsfiddle通过用黄色的点和下划线注释“ keyup”事件绑定来解释这一点。

相反，您想创建一个绑定到当前循环迭代中的字符的函数：

var getHandler = function(char) {
  return function() {
    //alert('#choice'+char);
    $('#answerchoice' + char).val($(this).val());
  };        
}
$(document).on('keyup', '#choice' + alphabetUpperCase[i - 1], getHandler(alphabetUpperCase[i - 1]))

另外，您可以为所有#choice [...]绑定一个处理程序（循环外），并根据选择存储数据以解决其对应的#answerchoice：

$(document).on('keyup', 'input[name=answer_choices]', function() {
  const char = $(this).attr('id').replace("choice", "")
  $('#answerchoice' + char).val($(this).val());
})

Answer 2

抱歉延迟...别叫了。

您已经与处理程序创建了竞争条件。 这是由于对变量i的引用被重用，并且导致将相同的值分配给每个事件处理程序对象。 （选择数量+ 1）。

解决此问题的一种方法是使用闭包，该闭包将在每次迭代期间保留i的值：

  (function(i) {
      $(document).on('keyup', '#choice' + alphabetUpperCase[i - 1], function() {
        alert('#choice'+alphabetUpperCase[i-1]);
        $('#answerchoice' + alphabetUpperCase[i - 1]).val($(this).val());
      });
  })(i);

但是还有其他一些可选的解决方案，需要对代码进行一些重组。