我正在实现一个井字游戏，但有特殊说明，当我按下一个按钮时，它会打开游戏的一个新 DIV 并禁用旧的，并且必须在两个 DIV 中更改按下的按钮等等，但是当我单击按钮它更改原始 div 而不是我希望它更新的那个，所以有帮助吗？ 提前致谢。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.xo {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
background-color: #F03;
height: 300px;
width: 310px;
text-transform: capitalize;
}
.btn {
background-color: #0C9;
height: 100px;
width: 100px;
}
</style>
<script>
var c = new Number();
c=0;
i=0;
var toPlay = 0;
var name = "xo"+c;
$(document).ready(function() {
$(document).on('click','.btn',function(){
alert(name);
var id = event.target.id;
if(c%2===0){
$("#"+id).attr("value","X");
$("#"+id).attr("disabled", "disabled");
}
else if(c%2!==0){
$("#"+id).attr("value","O");
$("#"+id).attr("disabled", "disabled");
}
newDiv = document.createElement("div");
newDiv.className="xo";
var $copy =$("#"+name).html();
document.getElementById(name).appendChild(newDiv);
var allChildNodes = document.getElementById(name).getElementsByTagName('*');
for(var i = 0; i < allChildNodes.length; i++)
{
allChildNodes[i].disabled = true;
}
c++;
name = "xo"+c;
alert(name);
newDiv.id=name;
toPlay++;
$("#"+name).html($copy);
});
});
</script>
</head>
<body>
<div class="xo" id="xo0">
<input type="submit" class="btn" name="1" id="1" value="Submit" />
<input type="submit" class="btn" name="2" id="2" value="Submit" />
<input type="submit" name="3" class="btn" id="3" value="Submit" />
<input type="submit" name="3" class="btn" id="4" value="Submit" />
<input type="submit" name="3" class="btn" id="5" value="Submit" />
<input type="submit" name="3" class="btn" id="6" value="Submit" />
<input type="submit" name="3" class="btn" id="7" value="Submit" />
<input type="submit" name="3" class="btn" id="8" value="Submit" />
<input type="submit" name="3" class="btn" id="9" value="Submit" />
<br></br>
</div>
</body>
</html>
最佳答案
问题是重复的 ID。 ID 的必须是唯一的使用类。
jQuery
var id = this.id;
if (c % 2 === 0) {
$("." + id).val("X");
$("." + id).prop("disabled", true);
} else if (c % 2 !== 0) {
$("." + id).val("O");
$("." + id).prop("disabled", true);
}
HTML
<input type="submit" class="btn 1" name="1" id="1" value="Submit" />
<input type="submit" class="btn 2" name="2" id="2" value="Submit" />
<input type="submit" name="3" class="btn 3" id="3" value="Submit" />
<input type="submit" name="3" class="btn 4" id="4" value="Submit" />
<input type="submit" name="3" class="btn 5" id="5" value="Submit" />
<input type="submit" name="3" class="btn 6" id="6" value="Submit" />
<input type="submit" name="3" class="btn 7" id="7" value="Submit" />
<input type="submit" name="3" class="btn 8" id="8" value="Submit" />
<input type="submit" name="3" class="btn 9" id="9" value="Submit" />
关于jquery - 复制按钮不会更改其文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24361949/