JQuery исчезает в гнездовом диапазоне

Question

Недавно я начал изучать jquery, и я решил написать небольшой плагин, как для упражнения.
Вот jsfiddle ссылка: http://jsfiddle.net/ndanvery/hy4cY/35/

Теперь у меня есть 2 вопроса:

1. Почему пролет исчезает тогда reappers когда я нажимаю на него?
2. Я хотел добавить некоторые «размытые» на фоне во время активного диапазона: http://jsfiddle.net/ndanvery/hy4cY/34/
   Но я не хочу, чтобы пролет был прозрачным! Я выбрал оболочку, но опустил класс .big в своем заявлении?
   $('#wrapper:not(.big)').addClass("not_focused");
   
   

Во всяком случае, спасибо всем за помощь мне :)

EDIT:
Мне очень жаль, но я должен признать, что моя проблема была не очень ясна. То, что я искал в первом вопросе, было способом фактически разрешить видимость span при нажатии и не исчезать!
Опять же, извините за недоразумение ...

Answer 1

Ответ на первый вопрос: Event propogation

Ответ на ваш второй вопрос в том, что вы устанавливаете непрозрачность оболочки, которая в свою очередь влияет на прозрачность для всех его детей. Если вы хотите, чтобы только часть содержимого обертки имела другую непрозрачность, вам нужно будет выбрать эти элементы и указать непрозрачность для них.

Answer 2

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

Попробуйте это, он отлично работает.

Answer 3

1) Ваш e.focus в вашем мышке не работает (для меня это null), поэтому вы всегда включаетесь в инструкцию if, которая исчезает из div. Затем из-за захвата/пузырька события ваш обработчик кликов по диапазону запускается дальше, после чего он снова исчезает. Вам лучше проверить, был ли элемент, на который вы нажали напрямую (используя e.target), не был .big span, что-то вроде :

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

2) Ваш селектор $ («# обертка: нет (.big)») говорит: «Найти элемент с идентификатором обертку, которая не имеет класс большой», который не является что вы хотите, что просто дает вам обертку. Вы исчезаете из обертки, которая исчезает изнутри.

Вы могли либо исчезнуть из детей, которые не один вы выбрали:

$("[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 срок и добавить его в документ, чтобы после того, как обертки поэтому он сидел бы выше.