Изменение класса jQuery не обновляется до тех пор, пока не будет наведен указатель мыши

У меня есть меню, и каждый пункт меню представляет собой диапазон с классом, установленным в css:

.newClass {color: red}

.oldClass {color:black} oldClass:hover {color:blue;}

Когда вы нажимаете на пункт меню, класс изменяется на: $(this).removeClass('oldClass').addClass('newClass');, что отлично работает.

Когда щелкает другой элемент меню, я возвращаю классы в текущий элемент меню с помощью: $(this).removeClass('newClass').addClass('oldClass');

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

Смотрите пример Габи в комментариях, что должно происходить.

Вот мой фактический код:

$('.headingRev').removeClass('headingRev').addClass('heading');
$(this).removeClass('heading').addClass('headingRev');

и вот css:

.heading {color: #bb1f1a;}
.heading:hover {color: #e9b49e;text-decoration:none;}
.headingRev {color: #e9b49e;}


class jquery hover addclass
person Clark Banks    schedule 13.10.2010    source источник
comment
Вы также можете добавить код, который вы используете для обнаружения кликов? вызывал у меня проблемы в прошлом. как вы определяете клики по другим элементам?   -  person Karthick    schedule 13.10.2010
comment
пожалуйста, покажите, как вы назначаете события наведения (если вы это делаете) и нажимаете .. кстати, вам не хватает . перед oldClass:hover   -  person Gabriele Petrioli    schedule 13.10.2010
comment
Небольшой автономный пример кода, воспроизводящего проблему, был бы очень полезен. jsfiddle — хороший способ добиться этого.   -  person Matt Ball    schedule 13.10.2010

Ответы (2)


arrow_upward
1
arrow_downward

Возможная проблема может заключаться в том, как вы удаляете выбор из текущего пункта меню.

вам не следует использовать this, если вы делаете это изнутри клика, потому что this будет указывать на элемент, по которому щелкнули, а не на предыдущий текущий.. если это так, вам следует использовать $('.newClass').removeClass('newClass').addClass('oldClass');

см. работающий код на http://www.jsfiddle.net/khGRW/.

Обновить

Теперь я вижу... вы используете Cufon, который заменяет текст изображениями или элементами холста...

Это делает его невосприимчивым к обычным изменениям DOM.

Вам нужно вызвать Cufon.refresh('#content') после изменения класса на элемент (который в данный момент не находится под событием hover), чтобы заставить его перерисовать меню в соответствии с текущим состоянием DOM.

Эффект hover обрабатывается автоматически, потому что они поддерживают эту опцию, но на этом мониторинг DOM заканчивается со стороны Cufon.

person Gabriele Petrioli    schedule 13.10.2010
comment
Извините, да, я уже делаю это. Правильный элемент нацелен, но просто не обновляется немедленно. Ваш пример кода в основном такой же, как у меня, но ваш работает, а мой нет. - person Clark Banks; 14.10.2010
comment
@Clark .. хм, странно .. убедитесь, что ваши классы правильно написаны заглавными буквами во всех местах .. потому что они чувствительны к регистру .. Также, если вы можете опубликовать рабочую копию своего кода, мы сможем лучше увидеть, где он терпит неудачу. - person Gabriele Petrioli; 14.10.2010
comment
Я скопировал и вставил свой точный код в исходный вопрос, и я не понимаю, почему он не работает. Потому что изменение класса действительно вступает в силу, но почему я должен наводить курсор мыши на пункт меню, чтобы увидеть изменение. Вот реальный сайт, чтобы вы могли увидеть поведение меню, о котором я говорю: urban-provocations.com - person Clark Banks; 14.10.2010
comment
@Кларк, проблема с Куфоном. Я обновил свой ответ решением этой проблемы. - person Gabriele Petrioli; 14.10.2010
comment
Пятно на Габи, большое спасибо. Можете себе представить, как это было неприятно. - person Clark Banks; 14.10.2010

arrow_upward
0
arrow_downward

попробуйте этот подход:

<ul>
<li class="ordinary">Menu 1</li>
<li class="ordinary">Menu 2</li>
<li class="ordinary">Menu 3</li>
</ul>

$('ul li').click(function(){
  $('ul li').removeClass("highlight").addClass("ordinary");
  $(this).removeClass("ordinary").addClass("highlight");
});
  1. при нажатии на пункт меню сделать все пункты меню обычным классом
  2. сделать выбранное меню классом выделения
person James Lin    schedule 14.10.2010