Question

注意：在开始解释之前，请让我指出这一点：这不是重复的主题，this one是关于insertAfter，而不是appendTo，我仍然无法＆＃ 39; t make it。

这笔交易是什么？

当我点击单选按钮时，它克隆了一个段落，其中包含1个输入类型文本，1个输入类型单选按钮和2个按钮（1个添加，另一个删除整个段落）你能帮助我让这个添加按钮工作吗？

应该做什么？它应该在第一个输入无线电之后立即添加1个无线电

好的，这就是

HTML

<input type="text" class="teste">

<!--Input text-->
<p class="text"><br><input type="text" placeholder="Question Name"><br><input type="text" value="User Answer" disabled><button onclick="remove_element(this)">Remove</button></p>

<!--Input date-->
<p class="date"><br><input type="text" placeholder="Question Name"><br><input type="date" disabled><button onclick="remove_element(this)">Remove</button></p>

<!--Input Radio-->
<p class="radio"><br><input type="text" placeholder="Question Name"><br><input class="radio_option" type="radio"><input type="text"><button onclick="addOption(this)">+</button><br><button onclick="remove_element(this)">Remove</button></p>

<p>Select a field to add</p>
<button type="text" class="addtext" onclick="addElement(this)">Textbox</button>
<button type="date" class="adddate" onclick="addElement(this)">Date</button>
<button type="radio" class="addradio" onclick="addElement(this)">Radio Button</button>

<div id="create_form"></div>

风格

<style>
.teste{
    display:none;
}

.text{
    display:none;
}

.date{
    display:none;
}

.radio{
    display:none;
}
</style>

只是将其显示设置为隐藏

的jQuery

function addElement(element){
var type = $(element).attr("type");
$("."+ type + ":first").clone().appendTo("#create_form");
$("."+ type + ":last").toggle();
};  

function remove_element(input){
     $(input).parent().remove();
};

function addOption(element){
    $(".teste:first").clone().appendTo($(element).parent().find("input:last"));
    $(".teste:last").toggle();
};

Answer 1

我为你创建了一个小提琴，并为脚本添加了点击处理程序：

$('.addtext, .adddate, .addradio').click(function() {
   addElement($(this));
});

http://jsfiddle.net/m2AwP/4/

appendTo查找最后一个输入jQuery

1 个答案: