Javascript Notes

Question

I took some sticky notes in javascript for fun.

If there are several sticky notes on the screen, I want the selected one to be selected to move forward. IE Raise the z-index higher than other sticky notes. I am currently doing this with CSS using: hover, which is pretty annoying. I want to do this in javascript / jquery. I tried to do addClass / removeClass with focus () and blur ()

This is what I still have

$('.darkYellow').click(function() { $(this).focus(function() { $(this).addClass("index"); }); }); $('.darkYellow').blur(function() { $(this).removeClass("index"); }); 

Updated and thanks to Christophe http://jsfiddle.net/EnigmaMaster/aQMhk/6/

Answer 1

Although at the moment I do not know why .on() does not work (this method is preferred!), The following code should work:

 $('.darkYellow').live("click", function() { $(".index").removeClass("index"); $(this).addClass("index"); }); 

That is all you need.

• Real-time event handler on click (it is recommended to use the on () function)
• find the index note and delete the class
• add class to current clicked element

Demo

Answer 2

Class selectors begin with a character . class names do not have (well, they can, but this is crazy).

 $(this).addClass("index") 

Answer 3

addClass does not need to include '.'

Just

 $(this).addClass("index"); 

http://api.jquery.com/addClass/

Answer 4

You call $('.darkYellow').click() before the notes are visible. .click() will add an event to each element that matches the selector during the call. You want something like .live() that will handle all elements present and future, for example.

 $('.darkYellow').live('click', function() { $(this).focus(function() { $(this).addClass("index"); }); }); 

UPDATE

Try:

 $('.darkYellow').live('click', function() { $(this).addClass("index"); }); $('.darkYellow').live('blur', function() { $(this).removeClass("index"); }); 

As someone else remarked, calling the .focus () function is not needed.