By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
431,805 Members | 1,273 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 431,805 IT Pros & Developers. It's quick & easy.

How can I get all occupied cells to highlight upon clicking on them?

P: 74
Here is HTML code

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  
  3.     <head>
  4.         <title>@Model.PageTitle</title>
  5.         <link href="~/Styles/Home.css" rel="stylesheet" />
  6.     </head>
  7.  
  8.     <body>
  9.  
  10.             <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  11.             <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
  12.             <script src="~/Scripts/Home.js"></script>
  13.  
  14.             <div class="home">
  15.  
  16.                 <div class="board">
  17.                     <div class="row">
  18.                         <div class="cell piece red"></div>
  19.                         <div class="cell piece red"></div>
  20.                         <div class="cell piece red"></div>
  21.                         <div class="cell piece red"></div>
  22.                         <div class="cell piece red"></div>
  23.                         <div class="cell piece red"></div>
  24.                         <div class="cell piece red"></div>
  25.                         <div class="cell piece red"></div>
  26.                     </div>
  27.                     <div class="row">
  28.                         <div class="cell piece red"></div>
  29.                         <div class="cell piece red"></div>
  30.                         <div class="cell piece red"></div>
  31.                         <div class="cell piece red"></div>
  32.                         <div class="cell piece red"></div>
  33.                         <div class="cell piece red"></div>
  34.                         <div class="cell piece red"></div>
  35.                         <div class="cell piece red"></div>
  36.                     </div>
  37.                     <div class="row">
  38.                         <div class="cell"></div>
  39.                         <div class="cell"></div>
  40.                         <div class="cell"></div>
  41.                         <div class="cell"></div>
  42.                         <div class="cell"></div>
  43.                         <div class="cell"></div>
  44.                         <div class="cell"></div>
  45.                         <div class="cell"></div>
  46.                     </div>
  47.                     <div class="row">
  48.                         <div class="cell"></div>
  49.                         <div class="cell"></div>
  50.                         <div class="cell"></div>
  51.                         <div class="cell"></div>
  52.                         <div class="cell"></div>
  53.                         <div class="cell"></div>
  54.                         <div class="cell"></div>
  55.                         <div class="cell"></div>
  56.                     </div>
  57.                     <div class="row">
  58.                         <div class="cell"></div>
  59.                         <div class="cell"></div>
  60.                         <div class="cell"></div>
  61.                         <div class="cell"></div>
  62.                         <div class="cell"></div>
  63.                         <div class="cell"></div>
  64.                         <div class="cell"></div>
  65.                         <div class="cell"></div>
  66.                     </div>
  67.                     <div class="row">
  68.                         <div class="cell"></div>
  69.                         <div class="cell"></div>
  70.                         <div class="cell"></div>
  71.                         <div class="cell"></div>
  72.                         <div class="cell"></div>
  73.                         <div class="cell"></div>
  74.                         <div class="cell"></div>
  75.                         <div class="cell"></div>
  76.                     </div>
  77.                     <div class="row">
  78.                         <div class="cell piece black"></div>
  79.                         <div class="cell piece black"></div>
  80.                         <div class="cell piece black"></div>
  81.                         <div class="cell piece black"></div>
  82.                         <div class="cell piece black"></div>
  83.                         <div class="cell piece black"></div>
  84.                         <div class="cell piece black"></div>
  85.                         <div class="cell piece black"></div>
  86.                     </div>
  87.                     <div class="row">
  88.                         <div class="cell piece black"></div>
  89.                         <div class="cell piece black"></div>
  90.                         <div class="cell piece black"></div>
  91.                         <div class="cell piece black"></div>
  92.                         <div class="cell piece black"></div>
  93.                         <div class="cell piece black"></div>
  94.                         <div class="cell piece black"></div>
  95.                         <div class="cell piece black"></div>
  96.                     </div>
  97.                 </div>
  98.  
  99.             </div>
  100.  
  101.     </body>
  102.  
  103. </html>




Here is JavaScript mixed with JQuery code

Expand|Select|Wrap|Line Numbers
  1. $(document).ready(function ()
  2. {
  3.     var cells = $(".cell");
  4.     var colorCount = 0;
  5.  
  6.     for (var i = 0; i < cells.length; i++)
  7.     {
  8.         var cell = $(cells[i]);
  9.         var isDark = colorCount % 2 == 0;
  10.         var isNextRow = (i + 1) % 8 == 0;
  11.         colorCount += isNextRow ? 2 : 1;
  12.         cell.css("background-color", isDark ? "navy" : "white"); 
  13.     }
  14.     $(".cell piece red").click(function(){
  15.         $(".this").css("background-color", "yellow"); 
  16.     });
  17.  
  18. });

Here is my CSS codes

Expand|Select|Wrap|Line Numbers
  1. .home > .board
  2. {
  3.     display: table;
  4.     border: 1px solid black;
  5. }
  6.  
  7. .home > .board > .row
  8. {
  9.     display: table;
  10. }
  11.  
  12. .home > .board > .row > .cell
  13. {
  14.     width: 80px;
  15.     height: 80px;
  16.     border: 1px solid black;
  17.     display: inline-block;
  18. }
  19.  
  20. .piece
  21. {
  22.     background-size: 75px 75px;
  23.     background-repeat: no-repeat;
  24.     background-position: center;
  25.     background-origin: content-box;
  26. }
  27.  
  28. .red
  29. {
  30.     background-image: URL('../images/red.png');
  31. }
  32.  
  33. .black
  34. {
  35.     background-image: URL('../images/black.png');
  36. }
Feb 23 '17 #1
Share this Question
Share on Google+
3 Replies


Dormilich
Expert Mod 5K+
P: 8,639
What is the problem you encounter?
Feb 24 '17 #2

P: 74
I can't get the red and blue checkers to highlight when I click on them?
Feb 24 '17 #3

P: 74
Can you help me @Dormilich
Feb 24 '17 #4

Post your reply

Sign in to post your reply or Sign up for a free account.