Question

实际上是在我的网站上进行在线测验，这是我的测验代码

 <form method="POST">
                <div id="questions">
                    <div class="row">
                <div class="col-lg-12">

                        <div class="form-group">
                            <label>Question <label id="question_no" value='1'>1</label></label>
                            <input type="text" name="question" class="form-control">
                        </div>

                </div>

            </div>

            <div class="row">
                <div class="col-lg-6">
                   <div class="form-group">

                            <input type="text" name="option1" class="form-control" placeholder="Option A">
                             </div>
                         </div>

            </div>

            <div class="row">
                <div class="col-lg-6">
                   <div class="form-group">

                            <input type="text" name="option1" class="form-control" placeholder="Option B">
                             </div>
                         </div>

            </div>

            <div class="row">
                <div class="col-lg-6">
                   <div class="form-group">

                            <input type="text" name="option1" class="form-control" placeholder="Option C">
                             </div>
                         </div>

            </div>

            <div class="row">
                <div class="col-lg-6">
                   <div class="form-group">

                            <input type="text" name="option1" class="form-control" placeholder="Option D">
                             </div>
                         </div>

            </div>

                </div>
                            <button type="submit" class="btn btn-success mb-4">Submit</button> <button id="add_more" class="btn btn-primary mb-4">Add More</button>
            </form>

实际上，我希望单击添加更多按钮时，然后将具有id问题的div中的相同代码附加到该div旁边，并且问题号也会自动增加我尝试了diff方法，但是它们都无法完美工作并提供帮助谢谢...

~~~~~~~更新~~~~~~~~ 这就是我干脆写的这段代码

<!--TEMPLATE-->
    <script type="text/javascript" id="questions_template">
        <div id="questions_template1">
                    <div class="row">
                <div class="col-lg-12">

                        <div class="form-group">

                            <label>Question 1</label>
                            <input type="text" name="question" class="form-control">
                        </div>

                </div>

            </div>

            <div class="row">
                <div class="col-lg-6">
                   <div class="form-group">

                            <input type="text" name="option1" class="form-control" placeholder="Option A">
                             </div>
                         </div>

            </div>

            <div class="row">
                <div class="col-lg-6">
                   <div class="form-group">

                            <input type="text" name="option1" class="form-control" placeholder="Option B">
                             </div>
                         </div>

            </div>

            <div class="row">
                <div class="col-lg-6">
                   <div class="form-group">

                            <input type="text" name="option1" class="form-control" placeholder="Option C">
                             </div>
                         </div>

            </div>

            <div class="row">
                <div class="col-lg-6">
                   <div class="form-group">

                            <input type="text" name="option1" class="form-control" placeholder="Option D">
                             </div>
                         </div>

            </div>

                </div>
    </script>
    <!--END OF TEMPLATE-->

然后是我的jQuery代码

$("#add_more").click(function(e){
            e.preventDefault();

            $("#questions").append($("#questions_template").html());



        })

Answer 1

首先，为您的模板问题添加div，这就是您要复制的问题。

<form method="POST">
         <div class="question">
      .....
         </div>
     <button>submit</button>
     <button>add_more</button>
</form>

现在使用jquery复制此“问题”并使用正确的ID更新它。

$("#add_more").click(function(e) {
    e.preventDefault();

  var id = $(".question").length;
  id++;
  var $newQuestion = $("form").find(".question:last").clone();
  $newQuestion.find("label").attr("value", id);
  $newQuestion.find("#question_no").text(id);
  $newQuestion.insertBefore($(".btn-success")); 
})

Jsfiddle：https://jsfiddle.net/xpvt214o/411294/

我如何在jQuery中创建测验系统

1 个答案: