Question

我正在尝试创建一个使用已定义模式生成多个动态ID的函数，我该怎么做？

跟进：Vue.js: How to generare multiple dynamic ID's with a defined pattern

详细信息：

我正在创建一个动态的学校测试应用程序。单击“添加问题”按钮时，a 生成具有4个输入字段和4个单选按钮的div。每个输入和单选按钮都需要有一个ID。到目前为止，该函数生成一个值，我希望可以将其用作ID。每个单选按钮都有一个 name，这使得只能在它所属的组中选择一个选项。随着每个按钮单击“添加问题”按钮（这是一个单选按钮），这个特殊的“名称”用于计算按钮点击次数。在计数器的帮助下，“问题”输入字段和“选项”输入字段的动态ID （连接到单选按钮）以这种模式生成：

示例

Testtitle-Question-Option

Foo.this.player

由于在启动测试时会生成div，并且仅通过按钮单击生成ID div不会得到它的ID。似乎上面例子中的ID只有一个问题，实际上是两个问题！

我目前没有使用saveTest（），它将用于将测试保存到mySQL数据库中，但它可能用于解决此问题！

1。我希望生成一个额外的“ID组”，因此每个输入字段都会获得一个ID，但我该怎么做？

2. 。此问题解决后，如何为单选按钮生成唯一ID？

3. 我如何将生成的值用作ID。如何将它们“附加”到输入字段和单选按钮？

4 还有其他更好的解决方法吗？ ID必须遵循某种模式，因为它们将被保存数据库，然后用于纠正测试。

我知道这是一个相当复杂的问题，但我试图尽可能好地解释。

我建议你看一下jsfiddle！单击添加问题，您将看到它是如何工作的。

JavaScriptQ1   (Question)
JavaScriptQ1O1 (Option)
JavaScriptQ1O2  
JavaScriptQ1O3
JavaScriptQ1O4

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

Answer 1

我更改了脚本。只是看看那个。它将为您使用过的所有控件生成动态ID。

var name=1;
    var theTitle="online";

    $("body").on('click', '#radioAddQuestion', function () {
        name++;     
        $(".dynamicform").append(createQuestion(name));
        
    });


     $(".dynamicform").append(createQuestion(name));
    function createQuestion(name){
    	var dynamic=`<span class="module">
                        <legend class="col-form-legend col-sm-10"></legend>
                        <div class="input-group input-group">
                            <label id="wQuestionLabel" class="form-control-label" style="width: 540px;" for="wQuestion">Question:</label>

                        </div>
                        <div class="form-group row">
                            <div class="input-group input-group">
                             <!-- The Question Inputfield that needs ID-->
                            
                                <input type="text" class="form-control" aria-label="" id="${theTitle + "Q" + name}" style="width: 540px;">
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="input-group input-group">
                                <label id="questionOptions" class="form-control-label" style="width: 540px;"
                                       for="wQuestion">Enter
                                    avaible options:</label>
                            </div>
                        </div>
                         <!-- The radiobuttons and option inputfields that needs ID's-->

                        <div class="form-group row">
                            <div class="input-group input-group">
                      <span class="input-group-addon">
                        <input type="radio" name="${theTitle +"rg"+name}" id="${theTitle + "Q" + name + "O" + "1"}" aria-label="">
                      </span>
                                <input type="text" id="${theTitle + "Q" + name + "input" + "1"}" class="form-control" aria-label="" style="width: 540px;">
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="input-group input-group">
                      <span class="input-group-addon">
                        <input type="radio" name="${theTitle +"rg"+name}" id="${theTitle + "Q" + name + "O" + "2"}" aria-label="">
                      </span>
                                <input type="text" id="${theTitle + "Q" + name + "input" + "2"}" class="form-control" aria-label="" style="width: 540px;">
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="input-group input-group">
                      <span class="input-group-addon">
                        <input type="radio" name="${theTitle +"rg"+name}" id="${theTitle + "Q" + name + "O" + "3"}" aria-label="">
                      </span>
                                <input type="text" id="${theTitle + "Q" + name + "input" + "3"}" class="form-control" aria-label="" style="width: 540px;">
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="input-group input-group">
                      <span class="input-group-addon">
                        <input type="radio" name="${theTitle +"rg"+name}" id="${theTitle + "Q" + name + "O" + "4"}" aria-label="">
                      </span>
                                <input type="text" id="${theTitle + "Q" + name + "input" + "4"}" class="form-control" aria-label="" style="width: 540px;">
                            </div>
                        </div>
                    </span>
                    `;
               return dynamic;     

    }

#singleQuestionModule {
  margin-left: 50px;
}

<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="d-flex justify-content-center">
            <fieldset class=" form-group row">
                <div class="dynamicform">
                  <!--Dynamic form comes here-->
                </div>
                <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>
            </fieldset>
        </div>
    </form>
</div>

Jsfiddle：https://jsfiddle.net/d9tfk1u6/

Answer 2

为什么不在你已经存在的元素上加上第一个id？如果你想使用id生成函数中出现的第一个id，要么更改id生成函数以便跳过它，要么使用onload来添加它。

这似乎是问题的明显解决方案，所以也许我误解了它。

生成具有已定义模式的多个动态ID的函数

2 个答案: