Question

我正在建立一个用户可以创建调查的网站。我希望能够做的事情之一是允许用户为他们想要的每个调查创建尽可能多的问题。我计划这样做的方法是在html页面上有一个基本表单，然后，使用javascript，有一个添加按钮，将一遍又一遍地添加表单，因为用户反复按下“添加问题”按钮。

我该怎么做？

Answer 1

有很多方法可以实现这一点，我将举一个例子。你需要：

一系列问题
添加新问题的按钮
问题模板

要在HTML中动态呈现问题数组，您可以使用像Handlebars这样的模板库。

这里有一个快速丑陋的例子说明了这一点：

// Create an array of questions
var q = [];
q.push({text: ''});

// Create a template to render your questions
// In this example I use handlebars 
var source   = document.getElementById("question-template").innerHTML;
var template = Handlebars.compile(source);
var context = {questions: q};

function renderTemplate(){
  var html    = template(context);
  document.getElementById('questions-placeholder').innerHTML = html;
}

//Render the template with the first question
renderTemplate();

//Add an event so when the user clicks the button you add a new question
document.getElementById("newquestion").addEventListener('click', function(){
      // Add the new question
      q.push({text: ""});
      
      //Re-render the template
      renderTemplate();
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.js"></script>


<h1>Questions</h1>

<!-- The question template -->
<script id="question-template" type="text/x-handlebars-template">
<div id="questions">
  {{#each questions}}
    <div>
       <label> Write your question </label>
       <input type="text" />
    </div>
  {{/each}}
</div>
</script>

<!-- Here handlebars will render your questions -->
<div id="questions-placeholder"></div>

<!-- The button to add new questions -->
<button id="newquestion">Add question</button>

编辑：我使用Jquery添加了第二个示例，因为第一个示例在重新渲染模板时需要某种数据绑定来保存数据。

$(document).ready(function() {
    //Selector where you will add your questions
    var placeholder     = $("#questions-placeholder"); 
    
    // Selector for the button
    var add_button      = $("#newquestion"); 
    
    // Adding new fields when the user click the button
    $(add_button).click(function(e){ 
        e.preventDefault();
        $(placeholder).append('<div><label>Write your question: </label><input type="text"/></div>'); 
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Questions</h1>

<!-- Here Jquery will add your questions -->
<div id="questions-placeholder"></div>

<!-- The button to add new questions -->
<button id="newquestion">Add question</button>

Javascript：如果用户请求，则多次添加相同的表单

1 个答案: