我正在尝试为每个问题创建一个带有一些选项的问题库

Question

我正在制作一个题库来存储问题。每个问题都有一些选项，有些选项有正确和错误的选项。

但问题是我制作的选项文本工作正常，但我通过单选按钮制作的选项状态（正确/错误）无法正常工作。当我再添加一个选项时，单选按钮无法正常工作。

我没有找到我做错的地方。基本上我将两者都作为数组类型，所以我循环它并获取所有值。

我的代码sn-p

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>

Answer 1

您添加的每个选项都使用相同的 id 和名称，因此会让人感到困惑。

您需要“附加”一个动态结果，而不是每次都使用相同的代码。

所以，不是一个完整的例子，而是：

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>');

});