Question

我正在尝试使用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会触发颜色变化，而另一些则不会。如果你们有任何有趣的想法请分享。

Answer 1

尝试

  <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/

Answer 2

$(document).ready(function(){   
$('div').click(function()
{ 
    $('div').each(function()
        {
                if($(this).hasClass('yes'))
                   $(this).addClass('no').removeClass('yes'); 
                else
                   $(this).addClass('yes').removeClass('no');   
         });
    });
});

检查一下

使用JQuery更改Div类背景颜色的问题

2 个答案: