Div類背景顏色與JQuery的變化問題

我正在做一些小小的實驗，使用php for循環來生成大量的div，這些div可以通過jQuery對它們的css進行更改。我現在試圖解決的謎題是生成一個棋盤格，一系列方形的黑色和白色格子，點擊後會互換顏色。我在圍繞onClick事件如何看待這種情況方面遇到了麻煩。Div類背景顏色與JQuery的變化問題

這裏就是我被困

<!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觸發顏色變化等不下去。如果你們有任何有趣的想法，請分享。

來源

2012-11-20 Emanegux

嘗試

<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-20 05:09:16

完蛋了執行一次。謝謝！爲什麼添加type =「text/javascript」可以解決問題？ – Emanegux

不客氣。看這個：）。 http://www.w3schools.com/tags/att_script_type.asp –

$(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-20 05:21:24 nu6A

Div類背景顏色與JQuery的變化問題

回答

相關問題