on click on element add specific class not working with jquery

Question

the scenarion is : there are 4 divs , one of them is selected once clicked , the selected one has a specific class

this the jquery code

      $(".taskdiv").click(function(){
       id = $(this).attr("id");
       $(".taskdiv").removeClass("taskItemActive");
       $(".taskdiv").addClass("taskItem");
       $("#"+id).removeClass("taskItem");
   $("#"+id).addClass("taskItemActive"); // the last two lines , where the element clicked is selected by id , seems to do nothg 

      });

this the css

   .taskItem{
       background-color:#4e6d8d;
       -moz-box-shadow: -5px -5px 5px CornflowerBlue;
       -webkit-box-shadow: -5px -5px 5px CornflowerBlue;
       box-shadow: -5px -5px 5px CornflowerBlue;
       cursor: pointer;
       }
      div .itemTitle{
       padding-left: 15%;
       padding-top: 5%;
       }
       .taskdiv{
         height: 50px;width: 200px;color: white;margin: 5%; 
       }
      .taskItemActive{

       background-color:   #3A87AD;
       -moz-box-shadow: -5px -5px 5px  #5dade2;
       -webkit-box-shadow: -5px -5px 5px  #5dade2;
       box-shadow: -5px -5px 5px  #5dade2;
       };

and the html

  <td> <div class="taskItemActive taskdiv" id="taskItem1"><h3 class="itemTitle" >Dates limites (0) <h3></div> </td>
      <td> <div class="taskItem taskdiv" id="taskItem2"><h3 class="itemTitle" > Congés </h3></td>
      <td> <div class="taskItem taskdiv" id="taskItem3"><h3 class="itemTitle" > Discipline </h3></td>
       <td> <div class="taskItem taskdiv" id="taskItem4" ><h3 class="itemTitle" >Autre..</h3></td>

@Update

the code below works also when we click the element , so this make element unchanged

$(".taskdiv").hover(

  function () {
   color = $(this).css("background-color");
    $(this).css("background-color","LightSteelBlue");
  },
  function () {
    $(this).css("background-color",color);
  }
);

palaѕн · Accepted Answer · 2013-05-03 11:06:56Z

1

Try this:

$(".taskdiv").click(function () {
    $(".taskdiv.taskItemActive").removeClass("taskItemActive");
    $(".taskdiv").addClass("taskItem");
    $(this).removeClass("taskItem").addClass("taskItemActive");
});

answered May 3, 2013 at 11:06

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

palaѕн Over a year ago

In your html markup, I can see the other than first div tag, all others are not closed properly like </div>.

fatiDev Over a year ago

hhh but not ine the appropriate page ,and i don't know what may cause that it is not working

palaѕн Over a year ago

Ok, just remove the hover function from your code, and add this .taskdiv:hover{background-color: LightSteelBlue} in you css.

Arun P Johny · Accepted Answer · 2013-05-03 11:09:59Z

1

Try

$(".taskdiv").click(function(){
    $(".taskdiv.taskItemActive").removeClass("taskItemActive");
    $(".taskdiv").not(this).addClass("taskItem");
    $(this).addClass("taskItemActive");
});

Demo: Fiddle

answered May 3, 2013 at 11:09

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

1 Comment

fatiDev Over a year ago

same thing .. , i think $(this) don"t select the clicked item or smthg like this

Collectives™ on Stack Overflow

on click on element add specific class not working with jquery

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related