Функция JQuery .hover .addClass - при нажатии JS становится нестабильным - PullRequest
Новая
       15

Функция JQuery .hover .addClass - при нажатии JS становится нестабильным

1 голос
/ 02 апреля 2012

Я добавляю класс при наведении на различные ссылки, прекрасно работает. Однако, когда вы нажимаете на ссылку, новый добавленный класс иногда остается или JS становится нестабильным. Я предполагаю, что мне нужно добавить класс удаления onclick? 

$("a").hover(function () {
    switch ($(this).attr("href")) {
        case "somelink1.html":
            parent.top.$(".start-box").toggleClass("tutorialHover");
            break;
            case "somelink2.html":
            parent.top.$(".end-box").toggleClass("tutorialHover");
            break;
            // etc..

1 Ответ

2 голосов
/ 02 апреля 2012

Я не вижу полный код здесь (усеченный и т. Д.), Но hover ожидает две функции. Это просто инкапсуляция mouseenter и mouseleave в одном. Вам просто нужно добавить ClassClass во входной части и removeClass в выходной части. Клик не должен иметь к этому никакого отношения, если вы действительно не ожидаете чего-то другого, если вы все еще зависаете и еще не нажали.

Переключение класса лучше для отдельных событий, таких как щелчок. У Hover всегда есть потенциал, чтобы всегда вызывать вход и выход (если только вы никогда не двигаете мышью!), Так что четко указывайте, когда класс должен быть добавлен и когда он должен быть удален.

http://jsfiddle.net/As2dF/

Д'оо, только что понял, что вы можете установить одно и то же событие как для входа, так и для выхода ... Я все равно оставлю свой ответ, так как считаю, что лучше быть явным: две функции - одна входная, а другая выходная - но Я ошибаюсь, что вам нужно поставить два.

[обновление]

Экспериментируя с одной функцией, выполняющей двойную функцию (т. Е. toggleClass в одной функции вместо addClass и removeClass, и неудивительно, что невозможно воспроизвести проблему щелчка. Это наводит меня на мысль, что это либо :

  1. Заметил, что вы не запрещаете поведение ссылок по умолчанию. Правдоподобным предположением является то, что вы зависаете (добавляете класс), щелкаете (обновляете страницу), и ваша мышь все еще находится над элементом NON-CLASSED; когда вы выходите, класс переключается. Если это проблема или даже что-то, связанное с этим, то как EXPLY о addClass и removeClass (вместо toggleClass) гарантирует, что он делает то, что вы хотите. Тем не менее, если это проблема, вы можете обновить начало своей функции так, чтобы href не срабатывал. 

    $("a").hover(function (e) {
  e.preventDefault();
  // etc

  2. ошибка селектора (вы добавляете и удаляете два разных "уровня", которые перекрываются, в результате чего классы становятся супер вонючим

  3. относится к # 1, ошибка всплытия событий. Хотя в конечном итоге вы, возможно, не захотите полностью прекратить распространение, посмотрите, работает ли этот эксперимент - для вашей триггерной функции передайте событие и остановите его распространение: 

    $("a").hover(function (e) {
  e.stopImmediatePropagation();
  // etc

Это может вызвать другие нежелательные побочные эффекты (может быть, другие события не запускаются, которые должны быть!), Но, по крайней мере, это поможет изолировать пузырящиеся проблемы.

...