动态生成的具有唯一ID的Div

Question

此代码生成一个div，每个div都有一个不同的id。按下按钮后，一切正常。第二次按下后，创建的第一个div的id与创建的新div相同。我如何做到这一点，以便过去的div不会改变？

var newdiv = 11;
var newimg = 7;
var lastimg = 0;
var divid = "";

$(document).ready(function(){

$("#divcreate").click(function(){
     divid = "div"+newdiv;
     $("#adddivs").append('<td><div id="div'+ newdiv +'" ondrop="drop(event, divid)" ondragover="allowDrop(event, divid)"><img id="drag'+ newimg +'" src="#" alt="your image" draggable="true" ondragstart="drag(event)" width="100" height="100"/></div></td>');
     $("#div"+newdiv).css({"width": "100px", "height": "100px", "margin": "10px",  "padding": "10px", "border": "1px dashed orange", "border-radius": "15px"});
     newdiv += 1;
     newimg += 1;
});
});

Answer 1

您的代码似乎在此代码段中正常运行。

＆＃13;

＆＃13;

print(var.strip('[').strip(']').strip("'"))

＆＃13;

var newdiv = 11;
var newimg = 7;
var lastimg = 0;
var divid = "";

$(document).ready(function(){

$("#divcreate").click(function(){
     divid = "div"+newdiv;
     $("#adddivs").append('<td><div id="div'+ newdiv +'" ondrop="drop(event, divid)" ondragover="allowDrop(event, divid)"><img id="drag'+ newimg +'" src="#" alt="your image" draggable="true" ondragstart="drag(event)" width="100" height="100"/></div></td>');
     $("#div"+newdiv).css({"width": "100px", "height": "100px", "margin": "10px",  "padding": "10px", "border": "1px dashed orange", "border-radius": "15px"});
     newdiv += 1;
     newimg += 1;
});
});

＆＃13;

＆＃13;

＆＃13;

Answer 2

我检查了一下，它工作正常：

＆＃13;

＆＃13;

var newdiv = 11;
var newimg = 7;
var lastimg = 0;
var divid = "";

$(document).ready(function(){

$("#divcreate").click(function(){
     divid = "div"+newdiv;
     $("#adddivs").append('<td><div id="div'+ newdiv +'" ondrop="drop(event, divid)" ondragover="allowDrop(event, divid)"><img id="drag'+ newimg +'" src="#" alt="your image" draggable="true" ondragstart="drag(event)" width="100" height="100"/></div></td>');
     $("#div"+newdiv).css({"width": "100px", "height": "100px", "margin": "10px",  "padding": "10px", "border": "1px dashed orange", "border-radius": "15px"});
     newdiv += 1;
     newimg += 1;
});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divcreate">Click !</div>
<div id="adddivs"></div>

＆＃13;

＆＃13;

＆＃13;

但如果您对此代码有疑问，可以将变量定义为$(document).ready(function(){，因此代码应该如下所示：

＆＃13;

＆＃13;

$(document).ready(function(){
var newdiv = 11;
var newimg = 7;
var lastimg = 0;
var divid = "";

$("#divcreate").click(function(){
     divid = "div"+newdiv;
     $("#adddivs").append('<td><div id="div'+ newdiv +'" ondrop="drop(event, divid)" ondragover="allowDrop(event, divid)"><img id="drag'+ newimg +'" src="#" alt="your image" draggable="true" ondragstart="drag(event)" width="100" height="100"/></div></td>');
     $("#div"+newdiv).css({"width": "100px", "height": "100px", "margin": "10px",  "padding": "10px", "border": "1px dashed orange", "border-radius": "15px"});
     newdiv += 1;
     newimg += 1;
});
});

＆＃13;

＆＃13;

＆＃13;