3

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

现在我有 2 个问题：

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

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

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

4

3 回答 3

1

1）你的mouseup中的e.focus不起作用（对我来说它是null），所以你总是进入淡出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 的元素”，这不是你想要的，它只是给你包装器。您正在淡出包装器，它会淡出其中的所有内容。

您可以淡出不是您单击的孩子：

$("[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 跨度并将其附加到文档到包装器之后，以便它位于上方。

于 2013-04-19T09:53:48.567 回答
0 
$("div[id^=span]").click(function(e) {
    $(this).find('.big').fadeIn("fast");
    $(this).dequeue();
}).find('.big').click(function(e) {
    e.stopPropagation();
});

试试这个它工作正常。

于 2013-04-19T09:50:43.453 回答
0

第一个问题的答案：事件传播

第二个问题的答案是您正在为包装器设置不透明度，这反过来会影响其所有子级的不透明度。如果您只希望包装器的某些内容具有不同的不透明度，则必须选择这些元素并为它们指定不透明度。

于 2013-04-19T09:35:46.457 回答