所以我左边有一个按钮,右边有一个表格。如果单击左侧的按钮,则最多可以创建6个表单。如果我手动在html中创建这些表单,一切都会正确显示。但是,由于我正在克隆它们,它们似乎表现得很奇怪。
例如关于第4个克隆,按钮被按下而不是停留在左上角。
每次克隆该部分时,我都会更新该表格的编号。但是如何让它们保持在网格中?如何根据显示的数字使它们保持升序?
谢谢!
var cloneIndex = 1;
var clones_limit = 5;
var cloned_nbr = $(".clonedInput").length-1; //Exclude Default (first) div
function clone()
{
if(cloned_nbr<clones_limit)
{
cloneIndex++;
cloned_nbr++;
var new_clone = $(".clonedInput").first().clone();
new_clone.attr("id", "clonedInput" + cloneIndex);
new_clone.find(".label-nbr").text(cloneIndex);
new_clone.find(".category").attr("id","category"+cloneIndex);
new_clone.show(".remove").attr("id","remove"+cloneIndex);
new_clone.on('click', 'button.clone', clone);
new_clone.on('click', 'button.remove', remove);
$(".clone").before(new_clone);
}
}
function remove(){
if(cloneIndex>1){
$(this).parents(".clonedInput").remove();
cloned_nbr--;
}
}
$(".clone").on("click", clone);
$(".remove").on("click", remove);
答案 0 :(得分:1)
我在表单中添加了id="formy"
,然后使用$("#formy").append(new_clone)
添加了克隆。这似乎使您的按钮保持在左上方并保持克隆顺序。
<form id="formy" onsubmit="return false" style="background:transparent; border-color:transparent;">
<div id="duplicater0" class="clone flavNameDescBox addnewflavorimg col-4" style="display:inline-block;">
ADD ANOTHER FLAVOR PROFILE
</div>
<div id="clonedInput" class="clonedInput flavNameDescBox col-4" style="display:inline-block; clear:left;">
<h3>Create Flavor</h3>
<h4>Flavor profile <span class="label-nbr">1</span></h4>
<fieldset>
<input class="category" id="category1" placeholder="Your Web Site (optional)" type="url" tabindex="4" required>
</fieldset>
<fieldset>
<textarea placeholder="Type your message here...." tabindex="5" required></textarea>
</fieldset>
<fieldset>
<textarea class="textarea2" placeholder="Type your message here...." tabindex="5" required></textarea>
</fieldset>
<button class="remove">Remove</button>
</div>
</form>
<script>
var cloneIndex = 1;
var clones_limit = 5;
var cloned_nbr = $(".clonedInput").length-1; //Exclude Default (first) div
function clone()
{
if(cloned_nbr<clones_limit)
{
cloneIndex++;
cloned_nbr++;
var new_clone = $(".clonedInput").first().clone();
new_clone.attr("id", "clonedInput" + cloneIndex);
new_clone.find(".label-nbr").text(cloneIndex);
new_clone.find(".category").attr("id","category"+cloneIndex);
new_clone.show(".remove").attr("id","remove"+cloneIndex);
new_clone.on('click', 'button.clone', clone);
new_clone.on('click', 'button.remove', remove);
$("#formy").append(new_clone);
}
}
function remove(){
if(cloneIndex>1){
$(this).parents(".clonedInput").remove();
cloned_nbr--;
}
}
$(".clone").on("click", clone);
$(".remove").on("click", remove);
</script>