gpt4 book ai didi

javascript - 如何在 jquery 中克隆和放置两个不同的项目在各自的位置

转载 作者:可可西里 更新时间:2023-11-01 14:44:22 25 4
gpt4 key购买 nike

我有一个 div 和一个关闭该 div 的按钮。我分别克隆它们并为两者分配一个唯一的递增 id。一切正常,因为克隆发生了,按钮关闭了 Div。关于按钮的放置,我有一个问题。我希望按钮相对于其克隆的 div 始终处于相同位置。任何想法如何做到这一点?

HTML

<a href="#" class="button" onclick="hideDiv(this)" id="btn">X</a>
<div id="id"></div>
<a href="#" onclick="duplicateDiv()">Add</a>

Javascript

function duplicateDiv(){ 
$('#btn').clone().attr('id', 'btn'+ cloneCount2++).insertBefore($('[id^=id]:first'));

$('#id').clone().attr('id', 'id'+ cloneCount++).insertAfter($('[id^=id]:first'));

//clearing the input items in the new cloned div
$("#id").find("input").val("");
}


function hideDiv(obj){
var currentId = $(obj).attr('id');
var divId = currentId.replace("btn", "id");
$("#"+divId).hide();
$("#"+currentId).hide();
}

最佳答案

如果正确解释问题,请尝试使用 .appendTo().insertAfter($("#btn"+ cloneCount))

var cloneCount = 0, cloneCount2 = 0;

function duplicateDiv() {

//the close button
$("#btn")
.clone().attr("id", function(_, id) {
return id + (++cloneCount2)
})
.appendTo("body")

$("#id")
.clone().attr("id", function(_, id) {
return id + (++cloneCount)
})
.insertAfter($("#btn" + cloneCount))

//clearing the input items in the new cloned div
$("#id").find("input").val("");
}

function hideDiv(obj) {

var currentId = $(obj).attr('id');
var divId = currentId.replace("btn", "id");
$("#" + divId).hide();
$("#" + currentId).hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<a href="#" class="button" onclick="hideDiv(this)" id="btn">X</a>
<div id="id">div</div>
<a href="#" onclick="duplicateDiv()">Add</a>

关于javascript - 如何在 jquery 中克隆和放置两个不同的项目在各自的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32644813/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com