CODEWITHSUNDEEP
javascriptjquery
vinit_1791
vinit_1791

Reputation: 161

handling more than one divisions in javascript

In my program I have 3 divisions with class 'information', 'interest' and 'wall'. I want this divisions to change their color when a a user clicks on it. Initially all 3 division classes have same color #dcdcdc. When user clicks on 1 of them I want to change its color to #999, but color of other divisions must remain #dcdcdc.

This much part is working correctly but when i click on 2nd division, the previous doesn't change its color back to #dcdcdc.

JavaScript part.

$(document).ready(function(){
 $('#pro_head > div').click
 (
  function() 
  {
   $(this).css("background-color", "#999");
   $(this).css("font-weight", "bold");
  },
 );
});

HTML part:

<div pro_head>
  <div class="information"></div>
  <div class="interest"></div>
  <div class="wall"></div>
</div>

Upvotes: 2

Views: 134

Answers (2)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

CSS 

.selected {
   background-color: #999;
   font-weight : bold;
}

JS

$(document).ready(function(){ 
  var divs1 = $('#pro_head1 > div'), /* I'm guessing selectors */
      divs2 = $('#pro_head2 > div'), 
      addHandler = function(divs) {
         divs.on('click', function() { 
            divs.removeClass('selected');
            $(this).addClass('selected');
         }); 
      };

 addHandler(divs1);
 addHandler(divs2);

})

The idea is to create a special class that has to be applied on the selected division (and removed elsewhere). In this way you could manage complex style without specifying all css rules inside JS and you can better identify presentational layer from functional layer

Edit: updated after user request in a comment.

Upvotes: 3

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

You could do

$(document).ready(function(){
 $('#pro_head > div').click
 (
  function() 
  {
  var divs = $('#pro_head > div');
   divs.css("background-color", "#dcdcdc");
   divs.css("font-weight", "normal");
   $(this).css("background-color", "#999");
   $(this).css("font-weight", "bold");
  },
 );
});

Upvotes: 0

Related Questions