Question

我正在制作一份问卷，我通过jQuery生成HTML。下面是我到目前为止所做的代码。

我在.add-question课程中附加问题。我已经为每次点击分配了一个计数器值。它有two types：文字和多项选择。当我将其类型更改为多项选择时，应该有add choice的链接。点击add choice后，应与delete choice link一起生成新的输入字段。

添加一个问题工作正常。但是，当我一次生成两个问题，然后将类型更改为multiple choice，然后添加更多fields时，jQuery开始在两个问题中添加input fields。删除字段后，它还会删除与该ID相关联的每个输入。

文字类型

将类型更改为多项选择

删除选择，在删除选择时单击它已删除问题2的输入

$(document).ready(function() {
   $('.btn-success').hide();
   var counter = 0;
   var choice = 1;
   $('.btn-add').on('click', function(){
       counter++;
       $('.add-question').append('<br>' + '<div class="question_'+counter+'">'+
               '<div class="form-group">'+
            '<label class="control-label col-md-4" for="question-type">Question Type:</label>'+
            '<div class="col-md-4">'+
                '<select class="form-control question-type" id="'+counter+'">'+
                    '<option value="text">Text</option>'+
                    '<option value="multiple" id="'+counter+'">Multiple Choice</option>'+
                '</select>'+
            '</div>'+
            '</div>'+
        '<div class="form-group">'+
            '<label class="control-label col-md-4" for="question">Enter Question:</label>'+
            '<div class="col-md-4">'+
                '<input type="text" name="question[]" class="form-control" />'+
            '</div>'+
            '<div class="col-md-4">'+
                '<button type="button" class="btn btn-danger btn-delete " id="'+counter+'">Delete Question</button>'+
            '</div>'+
        '</div>'+
        '<div class="form-group txt-answer'+counter+'">'+
            '<label class="control-label col-md-4" for="answer">Answer:</label>'+
            '<div class="col-md-4">'+
                '<input type="text" name="answer[]" id="answer" class="form-control" />'+
            '</div>'+
        '</div>'+
        '<hr>'+
        '<div>'+
        '</div>'
        );
     $('.btn-success').show();   
   });

   $(document).on('click', '.btn-delete' , function() {
       var buttonId = $(this).attr("id");
       $('.question_'+buttonId).remove();
       if($('.question_'+buttonId) === "undefined") {
       $('.btn-success').hide();
   }
   });


   $(document).on('change', '.question-type' , function(){
//      var value = $('#question-type').val();
      var value = $(this).attr("id");

      if($(this).val() === "multiple")  {
          $('.txt-answer'+value).replaceWith('<div class="form-group remove-choice'+choice+'">'+    
            '<label class="control-label col-md-4" for="choice">Choice '+choice+':</label>'+
            '<div class="col-md-4">'+
                '<input type="text" name="choice[]" id="choice" class="form-control" />'+
            '</div>'+
            '<div class="col-md-2 add-choice">'+
            '<label class="" for="choice"></label>'+
                '<input type="checkbox" name="flag[]" id="flag" /> Correct?'+
                '<button type="button" class="btn btn-link btn-remove" id="'+choice+'">Delete Choice</button>'+
            '</div>'+
            '<button type ="button" class="btn btn-link col-md-offset-4 btn-choice">Add Choice</button>'+
        '</div>'
        );
      } else if($(this).val() === "text") {
          var choiceId = $(this).attr("id");
          $('.remove-choice'+choiceId).replaceWith('<div class="form-group">'+
            '<label class="control-label col-md-4" for="answer">Answer:</label>'+
            '<div class="col-md-4">'+
                '<input type="text" name="answer[]" id="answer" class="form-control" />'+
            '</div>'+
        '</div>');
      }
   });

   $(document).on('click', '.btn-choice', function() {
     choice++;
      $('<div class="form-group remove-choice'+choice+'">'+     
            '<label class="control-label col-md-4" for="choice">Choice '+choice+':</label>'+
            '<div class="col-md-4">'+
                '<input type="text" name="choice[]" id="choice" class="form-control" />'+
            '</div>'+
            '<div class="col-md-2">'+
            '<label class="" for="choice"></label>'+
                '<input type="checkbox" name="flag[]" id="flag'+choice+'" /> Correct?'+
                '<button type="button" class="btn btn-link btn-remove" id="'+choice+'">Delete Choice</button>'+
            '</div>'+
            '<br>'+
        '</div>').insertBefore('.btn-choice'); 
   });

   $(document).on('click', '.btn-remove', function() {
       var buttonId = $(this).attr("id");
       $('.remove-choice'+buttonId).remove();
   });
});

修改

我已将我的代码添加到小提琴中，请检查并告诉我如何才能让它变得更好？

JSfiddle

Answer 1

更改.insertBefore（this）;而不是.insertBefore（＆＃39; .btn-choice＆＃39;）;解决为所有多个选择问题添加选择。但仍然存在问题。这是反问题，所有多种选择问题都是一样的。我们可以通过添加属性来解决这个问题＆＃34; data-choiceCount＆＃34;对于所有＆＃b; btn-choice，然后我们可以在点击btn-choice按钮时将它用于选择计数。

Here fiddle is

更改了行

$(document).on('click', '.btn-choice', function() {
  var choice = parseInt($(this).attr('data-choiceCount')) + 1;
  $(this).attr('data-choiceCount', choice);
  $('<div class="form-group remove-choice'+choice+'">'+     
        '<label class="control-label col-md-4" for="choice">Choice '+choice+':</label>'+
        '<div class="col-md-4">'+
            '<input type="text" name="choice[]" id="choice" class="form-control" />'+
        '</div>'+
        '<div class="col-md-2">'+
        '<label class="" for="choice"></label>'+
            '<input type="checkbox" name="flag[]" id="flag'+choice+'" /> Correct?'+
            '<button type="button" class="btn btn-link btn-remove" id="'+choice+'">Delete Choice</button>'+
        '</div>'+
        '<br>'+
    '</div>').insertBefore(this); 
  });

使用jQuery动态创建的字段会立即删除 - 它们应该逐个删除

1 个答案: