Я пытаюсь создать банк вопросов с некоторыми вариантами для каждого вопроса - PullRequest
Новая
       9

Я пытаюсь создать банк вопросов с некоторыми вариантами для каждого вопроса

0 голосов
/ 27 мая 2020

Я делаю банк вопросов для хранения вопросов. В каждом вопросе есть несколько вариантов, у некоторых есть правильные и неправильные варианты.

Но проблема в том, что текст варианта, который я делаю, работает нормально, но состояние параметра (правильно / неверно), которое я делаю с помощью переключателей, не правильно работает. Когда я добавляю еще один вариант, переключатели не работают должным образом.

Я не понимаю, где делаю неправильно. В основном я делаю оба типа массивов, поэтому я использую oop и получаю все значения.

Мой фрагмент кода 

removeThis();

$('#addMoreButton').on('click',function() {
  $('#addMoreHere').append('<div class="col-12 m-4 removeThis"><div class="form-group row text-left"><div class="form-group col-md-6"> <label for="questionOptionText">Option Text <span class="text-danger">*</span></label> <div class="input-group"><input type="text" class="form-control" id="questionOptionText" name="questionOptionText[]" required placeholder="Enter Option Text ex: xyz"></div> <span id="questionOptionText_error" class="removemsg text-danger"></span> </div> <div class="form-group col-md-4"> <label for="questionOptionStatus">Option Status <span class="text-danger">*</span></label><div class="input-group"> <!-- 1 = Correct --> <div class="custom-control custom-radio"> <input type="radio" class="custom-control-input" id="questionOptionShow" name="questionOptionStatus[]" required value="1"> <label class="custom-control-label" for="questionOptionShow">Correct</label> </div> <!-- 0 = Wrong --> <div class="custom-control custom-radio"><input type="radio" class="custom-control-input" id="questionOptionHide" name="questionOptionStatus" required value="0" checked> <label class="custom-control-label" for="questionOptionHide">Wrong</label> </div> </div> <span id="questionOptionStatus_error" class="removemsg text-danger"></span> </div> <div class="col-md-2 add_col" style="margin-top: 35px;"><button type="button" data-toggle="tooltip" title="Remove This" class="btn btn-danger removeDiv" id="removeMoreButton"><b>-</b></button></div></div></div>');
 removeThis();
});

function removeThis() {
  $('.removeDiv').on('click',function() {
    $(this).parents('div.removeThis').remove();
  });
}
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
<div class="col-12 m-4">
  <div class="form-group row text-left">
    <div class="form-group col-md-6">
      <label for="questionOptionText">Option Text <span class="text-danger">*</span></label>
      <div class="input-group">
        <input type="text" class="form-control" id="questionOptionText" name="questionOptionText[]" required placeholder="Enter Option Text ex: xyz">
      </div>
      <span id="questionOptionText_error" class="removemsg text-danger"></span>
    </div>
    <div class="form-group col-md-4">
      <label for="questionOptionStatus">Option Status <span class="text-danger">*</span></label>
      <div class="input-group">
        <!-- 1 = Correct -->
        <div class="custom-control custom-radio">
          <input type="radio" class="custom-control-input" id="questionOptionShow" name="questionOptionStatus[]" required value="1">
          <label class="custom-control-label" for="questionOptionShow">Correct</label>
        </div>
        <!-- 0 = Wrong -->
        <div class="custom-control custom-radio">
          <input type="radio" class="custom-control-input" id="questionOptionHide" name="questionOptionStatus[]" required value="0" checked>
          <label class="custom-control-label" for="questionOptionHide">Wrong</label>
        </div> 
      </div>
    </div>
    <div class="col-md-2 add_col" style="margin-top: 35px;">
      <button type="button" title="Add More" class="btn btn-primary" id="addMoreButton"><b>+</b></button>
    </div>
  </div>
</div>

<div class="clearfix"></div>
<div id="addMoreHere"></div>
</div>

1 Ответ

0 голосов
/ 27 мая 2020

Каждая добавляемая вами опция использует одни и те же идентификаторы и имена, поэтому возникает путаница.

Вам нужно «добавить» динамический c результат, а не один и тот же код каждый раз.

Итак, это не полный пример, а: 

var number = 0; //for adding to IDs and names to make unique
$('#addMoreButton').on('click',function() {
  number++; //adds one so even if deleted a value, the number will still be unique
  var optionText = $('#questionOptionText').val(); //store the value
  $('#addMoreHere').append('<div><div class="form-group row text-left"><div class="form-group col-md-6"> <label for="questionOptionText' + number + '">Option Text <span class="text-danger">*</span></label> <div class="input-group"><input type="text" class="form-control" id="questionOptionText' + number + '" name="questionOptionText[' + number + ']" required value="' + optionText + '"></div></div>');

});
...