проблема с селектором jquery?

Question

$('.lecture, .lecture > *:not(".meta")').click(function(event) {
    event.stopPropagation(); 
    var myCheckbox = $(this).children(':checkbox');

    if(myCheckbox.is(':checked')){
        myCheckbox.removeAttr('checked');
        $(this).closest('.vortrag').css({'background':'#F0F0F0'});
    }else{
        myCheckbox.attr('checked','checked');
        $(this).closest('.vortrag').css({'background':'#F8C1AC'});
    }  
});

Может кто-нибудь объяснить, почему мой .lecture div перекрашивается, когда флажок внутри него не установлен, но когда он установлен, он не перекрашивается.

Итак, у меня есть несколько div с классом .lecture. Внутри этих элементов есть флажки. Я хочу, чтобы вся div.lecture вызывала флажок при нажатии (а не только сам флажок). Когда флажок установлен, div .lecture должен иметь другой цвет фона. Все работает просто отлично. Флажки будут отмечены и сняты, когда я нажму родительский элемент .lecture div. И он даже перекрашивается, когда я нажимаю на него в первый раз. Однако, как только флажок установлен, и я щелкаю его снова, чтобы снять флажок, backgroundColor больше не меняется.

Что бы это могло быть?

Answer 1

Если флажок является непосредственным потомком .lecture, тогда ваше второе правило будет нацелено на него.

Но если вы нажмете прямо на флажок, то

var myCheckbox = $(this).children(':checkbox');

вернет пустой объект jQuery, потому что вы пытаетесь найти флажок child (и this равен флажок ) ..

Пожалуйста, укажите фактическую структуру HTML, если вы считаете, что это не проблема ..