Question

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

现在我有两个问题：

当我点击它时，为什么跨度消失然后重新开始？
我想添加一些＆＃34;模糊＆＃34;跨度处于活动状态时的背景：http://jsfiddle.net/ndanvery/hy4cY/34/
但我不希望跨度透明！我选择了包装器但在声明中省略了.big类吗？
$('#wrapper:not(.big)').addClass("not_focused");

无论如何，感谢大家帮助我：）

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

Answer 1

1）你的鼠标中的e.focus不工作（对我来说它是空的），所以你总是进入淡出div的if语句。然后，由于事件捕获/冒泡你的跨度点击处理程序然后再触发，然后将其淡入。你最好检查你直接点击的元素（使用e.target）是不是.big跨度，类似于：

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

2）你的selector $（'＃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范围并将其附加到文档后面的包装器上，以便它位于上面。

Answer 2

第一个问题的答案：Event propogation

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

Answer 3

$("div[id^=span]").click(function(e) {
    $(this).find('.big').fadeIn("fast");
    $(this).dequeue();
}).find('.big').click(function(e) {
    e.stopPropagation();
});

试试这个工作正常。

Jquery在嵌套跨度中淡入淡出

3 个答案: