Post
Ask Question

Change the All Box Color in HTML

  1. $(document).ready(function(){   
  2.   $('.box').click( function() {      
  3.     $(this).addClass("blue");  
  4.     var n = $("div.box.blue").length;    
  5.     // check if all boxes are in slateblue  
  6.     if (n > 7)   
  7.        // 1 sec after the last one clicked, make all box red  
  8.        setTimeout(function() {  
  9.          $("div.box.blue").css("background", "red");   
  10.        }, 1000);           
  11.   } );  
  12. } );  
  13.      
Html code:
  1. <body>  
  2.   <table>  
  3.     <tr>  
  4.       <td><div class="box"></div></td>  
  5.       <td><div class="box"></div></td>  
  6.       <td><div class="box"></div></td>  
  7.     </tr>  
  8.     <tr>  
  9.       <td><div class="box"></div></td>  
  10.       <td></td>  
  11.       <td><div class="box"></div></td>  
  12.     </tr>  
  13.     <tr>  
  14.       <td><div class="box"></div></td>  
  15.       <td><div class="box"></div></td>  
  16.       <td><div class="box"></div></td>  
  17.     </tr>  
  18.   </table>  
  19.   <div class="green"></div>  
  20. </body>   
Css code: 
  1. .box{  
  2.     height:100px;  
  3.     width:100px;  
  4.     border:1px solid #000;  
  5.     margin:10px;  
  6. }  
  7.   
  8. .blue{  
  9.     background:#6A5ACD;  
  10. }  
  11.   
  12. .red{  
  13.     background:#f00!important;  
  14. }  
  15.   
  16. .green{  
  17.     height:24px;  
  18.     width:24px;  
  19.     background:#0f0;  
  20.     position:absolute;  
  21.     top:185px;  
  22.     left:185px;  
  23. } 
Jquery code: 
  1. $(document).ready(function(){   
  2.   $('.box').click( function() {      
  3.     $(this).addClass("blue");  
  4.     var n = $("div.box.blue").length;    
  5.     // check if all boxes are in slateblue  
  6.     if (n > 7)   
  7.        // 1 sec after the last one clicked, make all box red  
  8.        setTimeout(function() {  
  9.          $("div.box.blue").css("background", "red");   
  10.        }, 1000);           
  11.   } );  
  12. } );  
  13.