使用jQuery追加div，每个div都有不同的ID
[英]using jQuery to append div's and each div has a different ID
问题描述
So I'm trying to to use jQuery to append a div which will generate a card using the assigned class. 
因此，我尝试使用jQuery附加div，该div将使用分配的类生成卡。 The problem is I need to create a different ID each time so I can put random number on the card. 问题是我每次都需要创建一个不同的ID，以便可以在卡上放置随机数。 I'm sure there's an easier way to do this. 我敢肯定，有一种更简单的方法可以做到这一点。 So i'm posing two questions. 所以我提出两个问题。 how to make the code where it put the random number on the card go endlessly. 如何使将随机数放在卡上的代码层出不穷。 and how to append divs with unique ID's. 以及如何使用唯一ID附加div。 Sorry if my code isn't the best. 抱歉，如果我的代码不是最好的。 It's my first project. 这是我的第一个项目。
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <title></title> <style> .cardLook { border: 1px solid black; width: 120px; height: 220px; border-radius: 5px; float: left; margin: 20px; padding: 5px; background-color: #fff; } #card1,#card2,#card3,#card4,#card5 { transform:rotate(180deg); } #cardTable { background-color: green; height: 270px } .reset { clear: both; } </style> <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> </head> <body> <button id="deal">Deal</button> <button id="hit">hit</button> <button id="stand">Stand</button> <button id="hi">hi</button> <div id="number"></div> <div id="arrayOutput"></div> <div id="someId"></div> <div id="out2"></div> <div id="cardTable"> </div> <div class="reset"></div> <script> var what; //Services helper functon document.getElementById('deal').onclick = function deal() { var score1 = Math.floor(Math.random() *10 + 1); var score2 = Math.floor(Math.random() *10 + 1); var firstCard = score1; var secondCard = score2; //myNumberArray.push(firstCard, score2); //card1.innerHTML = myNumberArray[0]; //card2.innerHTML = myNumberArray[1]; $("#deal").click(function(){ $("#cardTable").append("<div class='cardLook' id='card1'></div>"); }); console.log(score2, score1) } var myNumberArray = []; $("#hit").click(function(){ $("#cardTable").append("<div class='cardLook' id="uniqueIdNumberOne"></div>"); if (myNumberArray > 1) { #cardTable } var card = Math.floor(Math.random() * 10) + 1; document.getElementById('number').innerHTML=card; myNumberArray.push(card); var number = myNumberArray.value; var arrayOutput = document.getElementById('number'); var someId = document.getElementById('someId'); someId.innerHTML = myNumberArray; card1.innerHTML = myNumberArray[0]; card2.innerHTML = myNumberArray[1]; card3.innerHTML = myNumberArray[2]; card4.innerHTML = myNumberArray[3]; card5.innerHTML = myNumberArray[4]; // console.log("myNumberArray: ", myNumberArray); what = calcTotal(myNumberArray); showMe(calcTotal(myNumberArray)); }); //var output = myNumberArray = calcTotal(list); function calcTotal(myNumberArray) { var total = 0; for(var i = 0; i < myNumberArray.length; i++){ total += myNumberArray[i]; } return total; } //document.getElementById('out2').innerHTML = out2; console.log("myNumberArray: ", myNumberArray); function showMe(VAL) { var parent = document.getElementById('out2'); parent.innerHTML = VAL; if (calcTotal(myNumberArray) > 21) { alert('you lose'); } }; document.getElementById('stand').onclick = function stand() { var compterDeal1 = Math.floor(Math.random() *10 + 1); var computerCards = compterDeal1; console.log(computerCards); computerArray.push(computerCards); if (computerCards < 21) { stand(); } } var computerArray = []; </script> </body> </html>
2 个解决方案
解决方案1
0 2016-01-15 20:01:10
对所有then使用唯一的类，然后按类调用then
解决方案2
0 2016-01-15 22:28:58
Add a global integer: 添加一个全局整数：
var cardNumber = 0;
A function to generate an id: 生成id的函数：
function newCardId() {
cardNumber ++;
return 'uniqueCardId' + cardNumber.toString();
}
And use: 并使用：
var newId = newCardId();
$("#cardTable").append("<div class=\"cardLook\" id=\"" + newId + "\"></div>");
Finally to access your new div: 最后访问您的新div：
$('#' + newId).
Note: Escape quotes within a string using backslash! 注意：使用反斜杠在字符串内转义引号！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.