Question

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

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

$(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);

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

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

2 个答案: