Jquery 在嵌套跨度中淡出

Question

我最近开始学习jquery，我决定写一个小插件作为练习。
这是 jsfiddle 链接:http://jsfiddle.net/ndanvery/hy4cY/35/

现在我有两个问题:

1. 为什么当我点击跨度时它会消失然后重新出现？
2. 我想在跨度处于事件状态时在背景上添加一些“模糊”:http://jsfiddle.net/ndanvery/hy4cY/34/
   但我不希望跨度是透明的!我是否选择了包装器但在声明中省略了 .big 类，对吗？
   $('#wrapper:not(.big)').addClass("not_focused");
   
   

无论如何，谢谢大家帮助我:)

编辑:
抱歉，但我必须承认我的问题不是很清楚。我在第一个问题中寻找的是一种让跨度在单击时保持可见而不消失的方法!
再次抱歉造成误解...

Answer 1

1) 你的 mouseup 中的 e.focus 不起作用(对我来说它是空的)，所以你总是进入淡出 div 的 if 语句。然后，由于事件捕获/冒泡，您的跨度单击处理程序将触发下一个，然后将其淡入。您最好检查直接单击的元素(使用 e.target)是否不是 .big 跨度，例如:

$(document).mouseup(function (e) {
    if(!$(e.target).hasClass(".big")) {
        $(".big").fadeOut("slow");
        $('#wrapper').removeClass("not_focused");
    }
});

2) 你的选择器 $('#wrapper:not(.big)') 说“查找 id 为包装器且不具有 big 类的元素”，这不是你想要的，这只是给你 wrapper 。您正在淡出包装器，从而淡出其中的所有内容。

您可以淡出不是您单击的子项:

$("[id^=span]").click(function () {
    $("[id^=span]").not(this).addClass("not_focused");
    $(this).find('.big').fadeIn("fast");
    $('#wrapper:not(.big)').addClass("not_focused");
    $(this).dequeue();
});

或者您可以淡出包装器并复制 .big span 并将其附加到文档中的包装器之后，以便它位于上方。