Javascript粘滞便笺 [英] Javascript Sticky Notes

问题描述

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

I made some sticky notes in javascript for fun.

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

When there are multiple sticky notes on the screen, I want the one that is selected to be brought forward. IE. raise the z-index to be higher then the other sticky notes. Currently I am doing this with CSS using :hover, which is kind of annoying. I want to do it in javascript/jquery. I tried to do addClass/removeClass with focus() and blur()

这是我目前所拥有的

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

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

已更新并感谢Christoph
http://jsfiddle.net/EnigmaMaster/aQMhk/6/

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

推荐答案

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

Though at the moment I don't know, why .on() does not work (this shoud be the preferred method!), the following code should work:

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

这就是你所需要的。

单击

1. 实时事件处理程序（首选使用on（））


2. 查找索引注释并删除类


3. 将类添加到当前已点击元素

1. live event handler on click ( use of on() should be preferred )
2. look for index note and remove class
3. add Class to current "clicked" element

DEMO

DEMO

这篇关于Javascript粘滞便笺的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！