jQuery tic-tac-toe清除板问题

时间:2013-08-29 08:54:17

标签: jquery tic-tac-toe

我曾尝试使用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>

她是我的小提琴

http://jsfiddle.net/cVN7j/

0 个答案:

没有答案