動態生成的具有唯一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

您的代碼似乎在此代碼段中正常運行。

 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; }); }); 

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

Answer 2

我檢查了它，它工作正常：

 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; }); }); 

 <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> 

但是如果你對這段代碼有問題，可以將變量定義為$(document).ready(function(){ ，所以代碼應如下所示：

 $(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; }); });