Change DOM element CSS with jquery Not

Question

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

Paul Roub · Accepted Answer · 2014-06-26 01:16:00Z

2

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

answered Jun 26, 2014 at 1:16

Paul Roub

36.5k27 gold badges88 silver badges95 bronze badges

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

2 Comments

user3871 Over a year ago

lol crap... I guess that would be the best way to go. I guess I was just trying too hard to implement other jQuery functions

Brenton Alker Over a year ago

Beat me to it :) Here is a fiddle using this technique jsfiddle.net/23Mk5 It also stores the elements in a variable to prevent duplication, and uses classes instead of applying the style directly.

Collectives™ on Stack Overflow

Change DOM element CSS with jquery Not

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related