0

我正在尝试使用 php for 循环来生成大量 div，这些 div 可以通过 JQuery 对其 css 的更改进行更改。我现在要解决的谜题是生成一个棋盘格，一系列黑色和白色的方形 div，单击它们会交换颜色。我无法思考 onClick 事件是如何看待这种情况的。

这是我卡住的地方

<!DOCTYPE html>
<html>
<head>
<style>
  .yes { background: black; 
        height: 50px;
        width: 50px;
        float: left;
        }
  .no { background: white; 
        height: 50px;
        width: 50px;
        float: left;
        }  

  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

</head>
<body>
    <?php 
        $j = 0;
    for($i = 0; $i < 100; $i++){
        if ($j == 0){
                echo "<div class = 'yes'>yes</div>";
                $j++;
            }
            if ($j == 1){
                echo "<div class = 'no'>no</div>";
                $j--;
            }
    }
  ?>

<script>
  var bw = 0;
  $(".no, .yes").one( "click", function () {
    if (bw == 0){
        $(".no" ).css( "background-color","black" );
        $( ".yes" ).css( "background-color","white" );
        bw++;
    }
        else {
        $(".no" ).css( "background-color","white" );
        $( ".yes" ).css( "background-color","black" );
        bw--;
        }


   });
    </script>

  </body>
  </html>

一些奇怪的转变正在发生，点击一些 div 会触发颜色变化，而其他则不会。如果你们有任何有趣的想法，请分享。

4

2 回答 2

3

尝试

  <script type="text/javascript">

       $(document).ready(function(){

          var bw = 0;
          $(".no, .yes").click(function () {
            if (bw == 0){
                $(".no" ).css( "background-color","black" );
                $( ".yes" ).css( "background-color","white" );
                bw++;
            }
                else {
                $(".no" ).css( "background-color","white" );
                $( ".yes" ).css( "background-color","black" );
                bw--;
                }


            }); 
         });

  </script>

当你使用one()

将处理程序附加到元素的事件。每个元素最多执行一次处理程序

http://api.jquery.com/one/

于 2012-11-20T05:09:16.273 回答
1 
$(document).ready(function(){   
$('div').click(function()
{ 
    $('div').each(function()
        {
                if($(this).hasClass('yes'))
                   $(this).addClass('no').removeClass('yes'); 
                else
                   $(this).addClass('yes').removeClass('no');   
         });
    });
});

也检查一下

于 2012-11-20T05:21:24.603 回答