我曾尝试使用 jQuery 使 tictactoe 工作正常,但问题是当清除板之一时
字段自动填充,清除板后有什么方法可以防止它。
这是我的代码。只需要防止在板被清除后自动填充元素
<script>
jQuery(document).ready(function(){
function clearboard(){
alert('you win');
jQuery('ul li').text('');
}
jQuery('li').click(function(){
// alert(jQuery(this).attr('class'));
if(!jQuery(this).text()){
jQuery(this).text('o');
}
jQuery("li").toggle(
function () {
var temp ='x';
jQuery(this).text(temp);
},
function () {
var temp ='o';
jQuery(this).text(temp);
}
);
if( (jQuery('.f1').text()=='x'&& jQuery('.f5').text()=='x'&& jQuery('.f9').text()=='x')||(jQuery('.f1').text()=='o'&& jQuery('.f5').text()=='o'&& jQuery('.f9').text()=='o')){
clearboard();
}
else if( (jQuery('.f1').text()=='x'&& jQuery('.f2').text()=='x'&& jQuery('.f3').text()=='x')||(jQuery('.f1').text()=='o'&& jQuery('.f2').text()=='o'&& jQuery('.f3').text()=='o')) {
clearboard()
}
else if( (jQuery('.f4').text()=='x'&& jQuery('.f5').text()=='x'&& jQuery('.f6').text()=='x')||(jQuery('.f4').text()=='o'&& jQuery('.f5').text()=='o'&& jQuery('.f6').text()=='o')) {
clearboard();
}
else if( (jQuery('.f7').text()=='x'&& jQuery('.f8').text()=='x'&& jQuery('.f9').text()=='x')||(jQuery('.f7').text()=='o'&& jQuery('.f8').text()=='o'&& jQuery('.f9').text()=='o')) {
clearboard();
}
else if( (jQuery('.f1').text()=='x'&& jQuery('.f4').text()=='x'&& jQuery('.f7').text()=='x')||(jQuery('.f1').text()=='o'&& jQuery('.f4').text()=='o'&& jQuery('.f7').text()=='o')) {
clearboard();
}
else if( (jQuery('.f2').text()=='x'&& jQuery('.f5').text()=='x'&& jQuery('.f8').text()=='x')||(jQuery('.f2').text()=='o'&& jQuery('.f5').text()=='o'&& jQuery('.f8').text()=='o')) {
alert('you win');
clearboard();
}
else if( (jQuery('.f3').text()=='x'&& jQuery('.f6').text()=='x'&& jQuery('.f9').text()=='x')||(jQuery('.f3').text()=='o'&& jQuery('.f6').text()=='o'&& jQuery('.f9').text()=='o')) {
clearboard();
}
else if( (jQuery('.f3').text()=='x'&& jQuery('.f5').text()=='x'&& jQuery('.f7').text()=='x')||(jQuery('.f3').text()=='o'&& jQuery('.f5').text()=='o'&& jQuery('.f7').text()=='o')) {
clearboard();
}
})
</script>
<style>
ul {
float: left;
max-width: 247px;
}
li {
border: 1px solid;
float: left;
font-size: 44px;
height: 60px;
list-style: none outside none;
text-align: center;
vertical-align: top;
width: 60px;
}
</style>
<body>
<ul>
<li class="f1"></li>
<li class="f2"></li>
<li class="f3"></li>
<li class="f4"></li>
<li class="f5"></li>
<li class="f6"></li>
<li class="f7"></li>
<li class="f8"></li>
<li class="f9"></li>
</ul>
她是我的小提琴