我希望用户能够创建数量不定的问题。一旦用户创建了一个问题,我希望出现另一个问题(问题 2),依此类推..
我该怎么办?
谢谢
这或多或少是我使用纯 JavaScript 会做的事情(请参阅评论以获取解释)
// Create a copy of a blank Question node
question_template = document.getElementById("questions").firstElementChild.cloneNode(true);
// A nice cloning wrapper
new_question = function(){return question_template.cloneNode(true);};
// Something to do when the user is finished putting in questions
alrt = function(){
alert(Array.prototype.map.call(document.getElementById(
"questions").getElementsByTagName("input"),
function(elt){return elt.value;}));
};
// Hook for when text is placed in textbox
addnew = function(){
// Remove the event listener (If you don't do this, then on every
// keystroke a new box will be created
document.getElementById("questions").lastElementChild.oninput = function(event){};
// Add a new line
document.getElementById("questions").appendChild(document.createElement("br"));
// Add a new question box
document.getElementById("questions").appendChild(new_question());
};
<div id="questions">
<input type="text" oninput="addnew()"/>
</div>
<input type="button" value="Done" onclick="alrt()"/>
更新:我刚刚在主帖的评论部分看到了你的阐述。你可以用这样的东西来实现它:
// Create a copy of a blank Question node
question_template = document.getElementById("questions").firstElementChild.cloneNode(true);
// A nice cloning wrapper
new_question = function(){return question_template.cloneNode(true);};
// Something to do when the user is finished putting in questions
alrt = function(){
alert(Array.prototype.map.call(document.getElementById(
"questions").getElementsByTagName("input"),
function(elt){return elt.value;}));
};
// Hook for when text is placed in textbox
addnew = function(){
// Add a new line
document.getElementById("questions").appendChild(document.createElement("br"));
// Add a new question box
document.getElementById("questions").appendChild(new_question());
};
<div id="questions">
<input type="text"/>
</div>
<input type="button" value="Add Another" onclick="addnew()"/>
<input type="button" value="Done" onclick="alrt()"/>
这可以通过大多数input
具有正确事件的元素来实现。W3 Schools 有一个很好的参考资料,如果你需要的话。
我会做类似的事情:
function addClone() {
var cloned = document.getElementById('test').cloneNode(true); //clone the element
document.body.appendChild(cloned); //add the cloned element to the page
}
<div id='test'>iadwjoam</div>
<input type="checkbox" id="xxx" name="xxx" onchange="addClone()" />
cloneNode()
- https://developer.mozilla.org/en-US/docs/Web/API/Node.cloneNode
你可以试试这样的
HTML
<div class="input-container">
<input class="question" placeholder="Question" type="text"/>
</div>
<div class="add-option">+</div>
JS
//click the '+' sign
$(".add-option").click(function(){
//find the first input and clone it then append it to the container
$(".input-container input:first").clone().appendTo(".input-container");
//clear any value from the next input had there been any added
$(".input-container input:last").val("");
});
更新
我省略了有关复选框的部分,从 UI 的角度来看,我认为您不需要复选框来完成此操作,不确定它是否暗示“已完成,我想继续”,但这由您决定。这是一个新的小提琴
HTML
<div class="input-container">
<input class="question" placeholder="Question" type="text"/>
</div>
<div class="add-option"><input type="checkbox"/></div>
JS
//click the checkbox
$(".add-option input[type=checkbox]").click(function(){
//find the first input and clone it then append it to the container
$(".input-container input:first").clone().appendTo(".input-container");
//clear any value from the next input had there been any added
$(".input-container input:last").val("");
//reset the checkbox
$(this).prop("checked", false);
});
在javascript中你可以这样做
var i = 0;
function addMore() {
i++;
var parentDiv = document.createElement("div");
var childLabel = document.createElement("label");
childLabel.appendChild(document.createTextNode("Enter Value " + i));
var childTextBox = document.createElement("input");
childTextBox.type = "text";
childTextBox.id = "txtInput" + i;
var childCheckBox = document.createElement("input");
childCheckBox.type = "checkbox";
childCheckBox.onchange = addMore;
parentDiv.appendChild(childLabel);
parentDiv.appendChild(childTextBox);
parentDiv.appendChild(childCheckBox);
document.body.appendChild(parentDiv);
}
<div>
Add Items
<input type="checkbox" onchange="addMore()">
</div>
希望这有帮助