我正在尝试创建一个函数来生成具有定义模式的多个动态 ID，我该怎么做？
跟进：Vue.js：如何使用定义的模式生成多个动态 ID https://stackoverflow.com/q/49776146/8770366
Details:
我正在创建一个动态的学校测试应用程序。单击“添加问题”按钮时，会出现一个
生成带有 4 个输入字段和 4 个单选按钮的 div。每个输入和单选按钮都需要有一个 ID。
到目前为止，该函数生成了一个值，我希望可以将其用作 ID。每个单选按钮都有一个
名称，这使得只能选择其所属组中的一个选项。每一个按钮
单击“添加问题”按钮（这是一个单选按钮），这个特定的“名称”用于计算按钮的点击次数。借助计数器，“问题”输入字段和“选项”输入字段的动态 ID
（连接到单选按钮）以此模式生成：
Example
测试标题-问题-选项
JavaScriptQ1 (Question)
JavaScriptQ1O1 (Option)
JavaScriptQ1O2
JavaScriptQ1O3
JavaScriptQ1O4
由于有一个div是在测试启动时生成的，而ID只是通过按钮点击生成的
div 将无法获取它的 ID。上例中的 ID 中似乎只有一个问题，而实际上有两个问题！
我目前没有使用 saveTest()，它将用于将测试保存到 mySQL 数据库中，但它可以用来解决这个问题！
1.我希望生成一个额外的“ID 组”，这样每个输入字段都会获得一个 ID，但我该怎么做呢？
2.当这个问题解决后，我如何为单选按钮生成唯一的 ID？
3.那么我该如何使用生成的值作为 ID。如何将它们“附加”到其输入字段和单选按钮？
4还有其他更好的方法来解决这个问题吗？ ID 必须遵循一定的模式，因为它们将被保存在
数据库，然后用于纠正测试。
我知道这是一个相当复杂的问题，但我已尽力解释清楚。
我建议你看看jsfiddle https://jsfiddle.net/DTcHh/61567/反而！单击“添加问题”，您将看到它是如何工作的。
var name=1;
$("body").on('click', '#radioAddQuestion', function () {
var singleQuestionModule = "singleQuestionModule";
var question = $(".module:first").clone()
.find("input:text").val("").end();
var question_label = $(".question-label:first").clone();
$(question).find(':radio').prop('checked', false);
$(question_label).insertBefore(".options-label:last");
$(question).insertBefore(".options-label");
$(question).find(':radio').attr('name', "n" + name);
// Here is where the ID value is currently generated:
name++;
let questionId = theTitle + "Q" + name;
console.log(questionId);
for (a = 1; a <= 4; a++) {
let optionId = theTitle + "Q" + name + "O" + a;
console.log(optionId);
}
console.log(name)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="singleQuestionModule">
<form class="form-group">
<div class="input-group input-group">
<label id="wQuestionLabel" class="form-control-label" style="width: 540px;" for="wQuestion">Question:</label>
</div>
<!-- The Question Inputfield that needs ID-->
<div class="input-group input-group">
<input type="text" class="form-control" aria-label="" id="wQuestion" style="width: 540px;">
</div>
<div class="input-group input-group">
<label id="questionOptions" class="form-control-label" style="width: 540px;" for="wQuestion">Enter avaible options:</label>
</div>
<!-- The radio buttons and option input fields that need ID's-->
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" name= "q" id="option1" aria-label="">
</span>
<input type="text" class="form-control" aria-label="" style="width: 540px;">
</div>
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" name="q" id="option4" aria-label="">
</span>
<input type="text" class="form-control" aria-label="" style="width: 540px;">
</div>
<!-- The Add and Save Test Buttons-->
<span class="options-label"></span>
<br>
<div class="form-group row">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success" id="radioAddQuestion">
<input type="radio" @click="counter += 1" name="options" autocomplete="off">Add Question</label>
<label class="btn btn-success">
<input type="radio" name="options" id="radioSaveTest" value="saveTest()" autocomplete="off">Save Test </label>
</div>
</div>
