CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Logeshwaran
Logeshwaran

Reputation: 461

Highlight the div onclick and unhighlight second time click

var a = document.getElementById('a');
var b = document.getElementById('b');
b.style.cursor = 'pointer';
a.style.cursor = 'pointer';
a.onclick = function() {
  $("#a").css("background-color", "red");
};
b.onclick = function() {
  $("#b").css("background-color", "yellow");
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a" id="a">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="b" id="b">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="b" id="b">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>

I want to add background-color css to the div i click and again clicking on the same dive it should remove the BG color.

Here i wrote the code as getting id statically. I may get many div in future so i need to get the div id dynamically. like something $this.id bla bla... please help me. Thank u..

Upvotes: 0

Views: 6274

Answers (4)

Jishnu V S
Jishnu V S

Reputation: 8409

if you want to use pure javascript, you don't need library just add this only and add css .blue { background:#06C;}

var a = document.getElementById('a');
var b = document.getElementById('b');
b.style.cursor = 'pointer';
a.style.cursor = 'pointer';
a.onclick = function() {
var myButtonClasses = document.getElementById("a").classList;
   if (myButtonClasses.contains("blue")) {
      myButtonClasses.remove("blue");
   }else {
      myButtonClasses.add("blue");
   }
};
b.onclick = function() {
  var myButtonClasses = document.getElementById("b").classList;
    if (myButtonClasses.contains("blue")) {
      myButtonClasses.remove("blue");
    }else {
      myButtonClasses.add("blue");
    }
};

Upvotes: 0

prasanth
prasanth

Reputation: 22490

Try with toggleClass() And b is two times there so use with class and apply with .each() .It will apply the each class of b .

$(document).ready(function(){
$('#a').click(function(){
$(this).toggleClass("red");
})

$('.b').each(function(){
  $(this).click(function(){
$(this).toggleClass("yellow");
})
  })
})
div{
  
  cursor:pointer;
}
.red{
  background-color:red;
 }
.yellow{
  background-color:yellow;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a" id="a">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="b" id="b">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="b" id="b">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>

Upvotes: 1

madalinivascu
madalinivascu

Reputation: 32354

You can use toggleClass to toggle between highlight and unhighlight 

$('div').click(function(){
  $(this).toggleClass('red');
});


 $('div').click(function(){
      $(this).toggleClass('red');
    });
.red {
  background:red;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a" id="a">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="b" id="b">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="b" id="b">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>

or use a data attribute to store your colors:

$('div').click(function(){
      $(this).css('background',$(this).attr('data-color'));
  $(this).toggleClass('default');
    });
.default {
  background:#fff!important;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="default" id="a" data-color="red">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="default" id="b" data-color="yellow">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="default" id="b" data-color="blue">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>

Upvotes: 5

Gray Fox
Gray Fox

Reputation: 357

Added toggleClass on .red class

a.onclick = function() {
    $("#a").toggleClass("red");
};

And style 

<style>
.red {
  background-color:red;
}
</style>

https://jsfiddle.net/bq1hewvs/1/

Upvotes: 0

Related Questions