0

css への JQuery の変更によって変更できる大量の div を生成するために、php for loops を使用して少し実験しています。私が今解決しようとしているなぞなぞは、クリックすると色が入れ替わる一連の正方形の白黒 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 をクリックすると色の変更がトリガーされ、他の 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()

要素のイベントにハンドラーをアタッチします。ハンドラは要素ごとに最大 1 回実行されます

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 に答える