Добавление и удаление повторяющихся классов

-1

У меня есть функция, которая, когда пользователь наводит курсор на кнопку, класс с bg fadesOut и класс hover fadesIn. Я также хочу, чтобы цвет текста изменился, и это находится внутри кнопки под классом h3, но, похоже, не может вызвать событие.Добавление и удаление повторяющихся классов

Я пробовал $ (this) .find ('h3') removeClass ('gray'); но не повезло!

Вот мой html и jQuery для работы фона, возможно, я не правильно его называю родительскими и дочерними событиями?

HTML

<div class="cta light-grey-bg"> 
    <h3 class="uppercase grey center"> 
    PHP Anchor link here 
    </h3> 
</div>

JQuery

$('.cta').hover(function(){ 
    $(this).removeClass('light-grey-bg', 800); 
    $(this).addClass('light-grey-bg-fade', 400); 

}, function(){ 
    $(this).addClass('light-grey-bg', 400); 
    $(this).removeClass('light-grey-bg-fade', 800); 
});

Как я сказал выше функция работает, но не повезло с удалением класса h3 серый? Любые предложения были бы замечательными.

источник

2013-08-01 user2212564

Здесь нет второго аргумента: http: //api.jquery.com/addClass/ – Cherniv

@ Чернов нет, но похоже, что он работает как продолжительность анимации, используемой с jquery UI http://jsfiddle.net/T2Q2K/ http://api.jqueryui.com/addClass/ –

Это не второй аргумент. это если вы передадите ему функцию. например '$ (this) .removeClass (function (index, previous) {/ * здесь вы можете работать с индексом и предыдущим именем класса, а также устанавливать новый * /});' –

Существует ошибка синтаксиса

$(this).find('h3').removeClass('grey'); //missing .

Демо: Fiddle

Ex:

$('.cta ').hover(function(){ 
    $(this).removeClass('light-grey-bg', 800).addClass('light-grey-bg-fade', 400).find('h3').removeClass('grey'); 

}, function(){ 
    $(this).addClass('light-grey-bg', 400).removeClass('light-grey-bg-fade', 800).find('h3').addClass('grey'); 
});

источник

2013-08-01 13:49:49

wow .. единственное, что на самом деле отвечает на его вопрос +1 –

Несколько правил эмпирическое первый:

Никогда не используйте пробелы в селекторов, если вам не нужно t подшить
Всегда ссылаться на ваш элемент вместо повторного извлечения его из DOM

Далее, вы используете removeClass и addClass, как если бы они были 2-го аргументы, которые они не делают, так как API документацию clearely состояния :

http://api.jquery.com/removeClass/ http://api.jquery.com/addClass/

Обратите внимание, что второй аргумент используется только в JQuery UI, что означает длительность, alonside с другими свойствами, похожими на JQuery родной animate функция (вы не указали, что используете пользовательский интерфейс). http://api.jqueryui.com/addClass/

Однако вы можете добавлять или удалять классы mroe сразу, просто разделяя их пробелом, например, так:

$element.addClass('one two three four');

Теперь, на ваше решение:

Вы выбираете одного из родителей «.cta», что хорошо, но вы переключаете эти классы элементов. Ваше предоставленное решение должно работать нормально ...

var $cta = $('.cta'), 
    $h3 = $cta.find('h3'); 

$cta.hover(
    function() { 
     $h3.toggleClass('light-grey-bg light-grey-fade'); 
    }, 
    function() { 
     $h3.toggleClass('light-grey-bg light-grey-fade'); 
    } 
);

Посмотрите, где я использую $ cta и $ h3? Это гораздо более дружелюбный браузер. Кроме того, вы были бы более безопасными, если бы ваши классы документов были непоследовательными, все еще используя add- и removeClass вместо toggleClass.

источник

2013-08-01 13:52:52 ReSpawN

Извините, что я включил jQuery UI так, чтобы я мог использовать аргумент. – user2212564

Добавление и удаление повторяющихся классов

ответ

Смежные вопросы