Javascript粘滞便笺

我在javascript中做了一些粘滞便笺，以获得乐趣。

当屏幕上有多个便签时，我希望将所选的一个粘贴在前面。 IE浏览器。 将z-index提高到高于其他粘滞便笺。 目前我正在用CSS做这个：hover，这有点烦人。 我想在javascript / jquery中做到这一点。 我试着用focus（）和blur（）做addClass / removeClass

这就是我到目前为止所拥有的

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

更新和工作感谢Christoph http://jsfiddle.net/EnigmaMaster/aQMhk/6/

Answer 1

虽然目前我不知道，为什么.on()不起作用（这应该是首选的方法！），以下代码应该工作：

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

这就是你所需要的。

1. 单击实时事件处理程序（首选使用on（））
2. 寻找索引笔记并删除类
3. 将Class添加到当前“clicked”元素

DEMO

Answer 2

类选择器以a开头. 字符，类名不（好吧，他们可以，但这种方式是疯狂）。

 $(this).addClass("index") 

Answer 3

对于addClass，不需要包含’。’

只是

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

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

Answer 4

您正在调用$('.darkYellow').click()在粘滞便笺实际存在之前$('.darkYellow').click() 。 .click()将在调用时向每个与选择器匹配的元素添加一个事件。 你想要的是类似.live()东西，它将处理所有元素，现在和未来Eg

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

UPDATE

尝试：

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

正如其他人指出的那样，对.focus（）的调用应该是不必要的。