CODEWITHSUNDEEP
jqueryaddclassremoveclass
fatiDev
fatiDev

Reputation: 5992

on click on element add specific class not working with jquery

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);
  }
);

Upvotes: 0

Views: 860

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388316

Try

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

Demo: Fiddle

Upvotes: 1

palaѕн
palaѕн

Reputation: 73886

Try this:

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

Upvotes: 1

Related Questions