CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3871
user3871

Reputation: 12716

Change DOM element CSS with jquery Not

I have two clickable headings. When you click one, it changes blue. If you click the other one, it changes blue, but should "unclick" the other heading and change it back to black.

I'm trying to do this using jquery not...

$("#pal1, #pal2").click(function(event) {
    $(this).css({"color" : "blue"});
    var pal1 = $(this).attr('id');
    var pal2 = $(this).next().attr('id');   
    $(this).not(pal2).css({"color" : "black"}); //if the selected heading is not pal1, or not pal2, changed the one that is not == $(this) back to black.
});

Or something like that.

Edit: I know I can do it this way... but wanted to use jQuery functions to reduce code size. Plus this isn't very efficient.

$("#pal1, #pal2").click(function(event) {
    $(this).css({"color" : "blue"});        
    if ($(this).attr('id') !== $("#pal1").attr('id')) {
        $("#pal1").css({"color" : "black"});
    }
    else {
        $("#pal2").css({"color" : "black"});
    }
});

Upvotes: 0

Views: 49

Answers (1)

Paul Roub
Paul Roub

Reputation: 36458

Set both to black, then set the clicked one to blue. 

$("#pal1, #pal2").click(function(event) {
  $("#pal1, #pal2").css({"color" : "black"});
  $(this).css({"color" : "blue"});
});

Upvotes: 2

Related Questions