Javascript 便笺

Posted 2023-05-09

【中文标题】Javascript 便笺

【英文标题】：Javascript Sticky Notes

【发布时间】：2012-05-01 00:56:47

【问题描述】：

为了好玩，我用 javascript 做了一些便签。

当屏幕上有多个便笺时，我希望将选中的那个放在前面。 IE。将 z-index 提高到高于其他便笺。 目前我正在使用 :hover 使用 CSS 执行此操作，这有点烦人。我想用 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/

【问题讨论】：

jsFiddle 似乎与这个问题无关。

@Quentin：jsFiddle 显然是提问者试图用 javascript 替换的 CSS 方法

我在代码中添加了 Javascript 并更新了链接

【参考方案1】：

类选择器以. 字符开头，类名不是（嗯，它们可以，但那样是疯狂的）。

$(this).addClass("index")

【讨论】：

（括号中的短语为投票提供了额外的动力;-)

@EnigmaMaster: a) 类真的被添加到元素中了吗？ （通过诸如 firebug 之类的 DOM 检查器工具检查）b）您为 .index 分配了哪些 CSS？

没有这个类似乎没有被添加，我有 z-index: 5;分配给 css

【参考方案2】：

对于 addClass 不需要包含 '.'

简单

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

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

【参考方案3】：

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

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

这就是你所需要的。

点击时的实时事件处理程序（应首选使用 on()） 查找索引注释并删除类 为当前“点击”元素添加类

DEMO

【参考方案4】：

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

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

更新

试试：

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

$('.darkYellow').live('blur', function() 
  $(this).removeClass("index");
);

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

【讨论】：

如果可能，我想避免使用 .live()，因为“从 jQuery 1.7 开始，不推荐使用 .live() 方法。” -来自api.jquery.com/live

@EnigmaMaster：文档中的下一句为“使用 .on() 附加事件处理程序”。我必须承认，我对.on() 并不熟悉，但它看起来——至少在这个简单的例子中——就像是.live() 的直接替代品。试一试，让我们知道您的进展情况。

【参考方案5】：

这是我最近编写的一个toggleFocus() 函数，它旨在为焦点/模糊事件的父节点添加一个.is-focused 类。

CodePen Demo

function toggleFocus(e) 
    setTimeout(() => 
         e.addEventListener('focus', (path) => 
              path[2].classList.add("is-focused");
         , true);

         e.addEventListener('blur', (path) => 
              path[2].classList.remove("is-focused");
         , true);
    , 0);


const items = document.getElementById('items');
const itemsArray = items.querySelectorAll(".item");

[].forEach.call(itemsArray, (item) => 
    toggleFocus(item)
);