jQuery .not () не работает должным образом

Question

jQuery .not () не работает должным образом

0

Я осмотрелся и исследовал, почему это не работает, но кажется, что я в какой-то иной ситуации.

У меня есть действие по умолчанию для элемента навигации, который обрабатывает анимацию навигации при наведении:

$('.logoCont').hover(function(){
    someFunction()...
}, function (){
    someFunctionReverse()...
});

Теперь, когда дело доходит до того, чтобы быть на экране мобильного телефона, я скрываю навигацию и размещаю там кнопку. Затем кнопка управляет анимацией меню, выдвигающимся сбоку. Я добавил строку кода, которая добавляет класс к элементам навигации при нажатии этой кнопки.

$('.mobile-menuButton').click(function(){ //When you click the menu-show button
    if($(this).hasClass('menuClosed')){ //Check to see if the menu is closed
        $('.nav_hover').addClass('mobile_open'); //Add the mobile_open class to the navigation items
    } else {
        $('.nav_hover').removeClass('mobile_open'); //remove it
    }
});

Итак, я изменил первую функцию зависания, чтобы сказать:

$('.nav_hover').not('.mobile_open').hover(function(){
    someFunction()...
}, function (){
    someFunctionReverse()...
});

Я надеялся, что это остановит someFunction() когда мобильное меню отключено.

Вы можете посмотреть, что я делаю ЗДЕСЬ. Когда вы уменьшаете экран до 540px, медиа-запрос вступает в силу, и вы можете нажать кнопку меню.

Документация на .not() ЗДЕСЬ. Второй пример в конце страницы - именно то, на что я надеялся.

ntgCleaner 29 нояб. 2013, в 20:08

Источник

0

$(".logoCont:not(.mobile_open)") это не должно быть $(".logoCont:not(.mobile_open)") ?
display-name-is-missing 29 нояб. 2013, в 19:08
0

Я только что попробовал, и это не работает, а
ntgCleaner 29 нояб. 2013, в 19:10
0

Хотите верьте, хотите нет, .not() работает так, как должно. Это твой код не работает.
Blue Skies 29 нояб. 2013, в 19:11
0

Из ссылки на ваши документы: «Удалить элементы из набора соответствующих элементов». Это именно то, что происходит.
Blue Skies 29 нояб. 2013, в 19:13
0

@BlueSkies Спасибо, я думал, что это означает, что из всего, что я пытаюсь выбрать, удалите эти элементы, чтобы выполнить это действие. Разве это не то, чего я хочу? и почему он все еще выбирает эти конкретные элементы?
ntgCleaner 29 нояб. 2013, в 19:20
0

Что вы подразумеваете под "все еще выбирая"? Выбор DOM является одноразовым. Вы выбираете набор элементов, удаляете некоторые из набора, затем применяете обработчики событий к результирующему подмножеству. Если вы добавите или удалите класс, который вы использовали в выделении DOM или в .not() , это не заставит его вернуться в прошлое и применить или удалить обработчики.
Blue Skies 29 нояб. 2013, в 19:25
0

Понимаю. Это имеет большой смысл, спасибо. Будет ли легче начать с класса, тогда, если я нажму на кнопку, удалите класс? Или я мог бы использовать .on() ?
ntgCleaner 29 нояб. 2013, в 19:26
0

Метод .on() - это просто еще один способ привязки обработчиков, но у него есть возможность использовать делегирование событий, что будет полезно для вашей цели. Прежде чем использовать делегирование событий, выполните быстрый веб-поиск, чтобы понять, что происходит.
Blue Skies 29 нояб. 2013, в 19:31
0

Спасибо. Исследуя больше.
ntgCleaner 29 нояб. 2013, в 19:32
0

использовать делегирование, см. этот похожий вопрос stackoverflow.com/questions/14842762/…
gillyspy 29 нояб. 2013, в 21:09

Показать ещё 8 комментариев

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

$(".logoCont:not(.mobile_open)") это не должно быть $(".logoCont:not(.mobile_open)") ?
Я только что попробовал, и это не работает, а
Хотите верьте, хотите нет, .not() работает так, как должно. Это твой код не работает.
Из ссылки на ваши документы: «Удалить элементы из набора соответствующих элементов». Это именно то, что происходит.
@BlueSkies Спасибо, я думал, что это означает, что из всего, что я пытаюсь выбрать, удалите эти элементы, чтобы выполнить это действие. Разве это не то, чего я хочу? и почему он все еще выбирает эти конкретные элементы?
Что вы подразумеваете под "все еще выбирая"? Выбор DOM является одноразовым. Вы выбираете набор элементов, удаляете некоторые из набора, затем применяете обработчики событий к результирующему подмножеству. Если вы добавите или удалите класс, который вы использовали в выделении DOM или в .not() , это не заставит его вернуться в прошлое и применить или удалить обработчики.
Понимаю. Это имеет большой смысл, спасибо. Будет ли легче начать с класса, тогда, если я нажму на кнопку, удалите класс? Или я мог бы использовать .on() ?
Метод .on() - это просто еще один способ привязки обработчиков, но у него есть возможность использовать делегирование событий, что будет полезно для вашей цели. Прежде чем использовать делегирование событий, выполните быстрый веб-поиск, чтобы понять, что происходит.
использовать делегирование, см. этот похожий вопрос stackoverflow.com/questions/14842762/…

adeneo · Answer 1 · 2013-11-29T16-18-00.000Z

Класс добавляется позже, а обработчик событий привязан ко всем элементам, которые соответствуют селектору в pageload (или всякий раз, когда он выполняется), и на самом деле не волнует то, что вы добавляете позже.
Вы должны проверить класс внутри обработчика события

$('.nav_hover').hover(function(){
    if ( !$(this).hasClass('mobile_open') ) {
        someFunction()...
    }
}, function (){
    if ( !$(this).hasClass('mobile_open') ) {
        someFunctionReverse()...
    }
});

делегация может также работать, но на самом деле это не будет работать с not() или hover()

$(document).on({
    mouseenter: function() {
        someFunction()...
    },
    mouseleave: function() {
        someFunctionReverse()...
    }
}, '.nav_hover:not(.mobile_open)');

Я пытаюсь это сейчас, хотя кажется, что это тоже не работает. Нужно ли делать .on() для щелчка по кнопке мобильного меню?
Упс, в ответ была опечатка, попробуйте сейчас!
Хм еще не работает. Я играю с тем, что говорит Blue Skies. Я не инициализирую это при загрузке, поэтому DOM не будет читать это.
Делегирование будет работать с использованием селектора, например ".nav_hover:not(.mobile_open)" с mouseenter и mouseleave .
Понимаю. Я тоже попробую это. Спасибо
Первый должен работать просто отлично, и если это не так, вероятно, проблема в чем-то другом, поскольку это действительно простая концепция просто проверки класса. Я также добавил делегированную версию обработчика событий, и это должно работать, но могут быть проблемы с :not() при использовании этого способа, так как переданный селектор на самом деле не выбирает элементы, он просто фильтрует их таким же образом первая функция действительно