Javascript 便笺答案

【问题标题】：Javascript Sticky NotesJavascript 便笺
【发布时间】：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 并更新了链接

标签： javascript jquery

【解决方案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)
});

【讨论】：