changing the color of p elements with .click(function)

Question

I'm trying to change the color of some p elements when they're clicked and while they're in that state, but when another p is clicked I need to change the color of the previous p element back to normal, just wondering how it's possible to do that.

thanks

$('.slide span p').click(function() {
 var p =$(this);
 p.css('color','#999');

           //not working with :not()
            p:not().css('#color','#ffffff');
});

Answer 1

Try:

$("p").not(this)

Answer 2

In your click handler, first change all p elements to normal, and then change the clicked element to its special color.

Answer 3

Here is how you may go:

1. Loop through all Ps
2. Check the current color of each p
3. Use if else to check if previous color apply new else apply previos.

Answer 4

$(function(){
    $('.slide span p').click(function() {
        $("p").css("color","black");
        $(this).css("color","red");
    });
});

Answer 5

Untested:

$('.slide span p').click(function() {
        var p =$(this);
        $('.slide span p').css("color", "#ffffff");
        p.css('color','#999');
});

Or you can add and remove css classes, allowing you to target the active P for more effects:

$('.slide span p').click(function() {
        $('.slide span p').removeClass('activePara');
        $(this).addClass('activePara');
});

Of course, you have to add a css style for activePara somewhere. I prefer the second approach because the rules for display are kept with the rest of the css, and you now have a class on the active para, allowing you to add more styling, or more jquery effects.

Answer 6

This should achieve what you want...

$('.slide span p').click(function() {
  //CHANGE ALL PARAGRAPHS WHO HAVE THIS CLICK EVENT BACK TO THE NORMAL COLOR
  $(".slide span p").css("color","#FFF");

  //APPLY YOUR SPECIAL COLOR HERE TO THIS PARTICULAR P
  $(this).css("color","#999");
});

Give that a shot...