Question

所以我试图使用jQuery附加一个div，它将使用指定的类生成一张卡片。问题是我每次都需要创建一个不同的ID，这样我就可以在卡上放置随机数。我确信有一种更简单的方法可以做到这一点。所以我提出了两个问题。如何将代码放在卡上随机编号的地方无休止地进行。以及如何附加具有唯一ID的div。对不起，如果我的代码不是最好的。这是我的第一个项目。

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

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

调用

Answer 2

添加全局整数：

var cardNumber = 0;

生成id的函数：

function newCardId() {
    cardNumber ++;
    return 'uniqueCardId' + cardNumber.toString();
}

并使用：

var newId = newCardId();
$("#cardTable").append("<div class=\"cardLook\" id=\"" + newId + "\"></div>");

最后访问你的新div：

$('#' + newId).

注意：使用反斜杠转义字符串中的引号！

使用jQuery追加div，每个div都有不同的ID

2 个答案: