javascript - Javascript 便签

Question

为了好玩，我用 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/更新和工作

Answer 1

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

$(this).addClass("index")

Answer 2

对于 addClass 不需要包含 '.'

简单地

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

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

Answer 3

您在$('.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() 的调用应该是不必要的。

Answer 4

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

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

这就是你所需要的。

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

演示

Answer 5

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

CodePen 演示

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)
});