using jQuery to append div's and each div has a different ID

Question

So I'm trying to to use jQuery to append a div which will generate a card using the assigned class. The problem is I need to create a different ID each time so I can put random number on the card. 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. 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>

Answer 1

对所有then使用唯一的类，然后按类调用then

Answer 2

Add a global integer:

var cardNumber = 0;

A function to generate an 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:

$('#' + newId).

Note: Escape quotes within a string using backslash!

using jQuery to append div's and each div has a different ID

Question

2 answers

solution1
0 2016-01-15 20:01:10

solution2
0 2016-01-15 22:28:58

using jQuery to append div's and each div has a different ID

Question

2 answers

solution1 0 2016-01-15 20:01:10

solution2 0 2016-01-15 22:28:58

solution1
0 2016-01-15 20:01:10

solution2
0 2016-01-15 22:28:58