jQueryを使用してtictactoeを正常に動作させようとしましたが、ボードの1つをクリアするときに問題が発生します
フィールドは自動的に塗りつぶされますが、ボードをクリアした後にそれを防ぐ方法はありますか。
これが私のコードです。ボードがクリアされた後に要素が自動的に埋められるのを防ぐ必要があります
<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>
彼女は私のフィドルです