jQuery Добавить/удалить класс

У меня есть дилемма. Я только что научился использовать функции добавления и удаления класса в jQuery, но когда вы добавляете класс, он не автоматически удаляет существующий класс. Моя проблема в этом. У меня есть кнопка с классом на ней, которая содержит цвет фона. Когда я нажимаю эту кнопку, я хочу, чтобы класс NEW имел приоритет над старым, поэтому по существу мне нужно удалить старый класс. Я просто не знаю, с чего начать. Если я попытаюсь удалить, добавить, удалить, добавить, зависание, похоже, не будет обрабатывать все это за один вызов. Может ли кто-нибудь дать мне идеи?jQuery Добавить/удалить класс

У меня есть два класса, один из которых называется «.ul.nav a» другой.

$('ul.nav a').hover(
    function() {  
    $(this).addClass('work'); 
    }, 
    function() { 
    $(this).removeClass('work'); 
    } 
);

Вот текущий класс:

ul.nav a { 
    display: block; 
    background-color:#B2B2D9; 
    margin-right:2%; 
    margin-bottom:5%; 
    margin-left:1%; 
    text-decoration:none; 
    border:3px #e6e6e6 ridge; 
    padding: 2%; 
    border-radius: 15px; 
}

Что я хотел бы изменить в

.work { 
    color:white; 
    background-color:red; 
    position:absolute; 
    top:100px; 
    left 230px; 
}

источник

2013-02-22 Robert Mailloux

Является ли ранее существующий класс тем же классом? – Blazemonger

Не могли бы вы привести пример HTML, который вы хотели бы до/после события зависания? –

Нет, я хочу, чтобы предыдущий класс ушел и заменил новый класс. Например, у моего старого класса есть синий цвет bg, я хочу, чтобы он был изменен на красный, наряду с другими функциями и т. Д. –

Изменить свой CSS для .work к ul.nav a.work, чтобы сделать его more specific. Затем он переопределит старые стили.

источник

2013-02-22 16:14:21 Blazemonger

Это прибило его! СПАСИБО!! –

Это проблема с CSS precedence. Изменение CSS для:

ul.nav a.work { 
    color:white; 
    background-color:red; 
    position:absolute; 
    top:100px; 
    left 230px; 
}

В качестве альтернативы, как это только для висения, вы можете удалить ваши JavaScript и изменить CSS для:

ul.nav a:hover { 
    color:white; 
    background-color:red; 
    position:absolute; 
    top:100px; 
    left 230px; 
}

источник

2013-02-22 16:13:56 Curt

Yup, это тоже. Спасибо –

Как @Blazemonger предполагает в своем замечании, специфичности и CSS каскадные остановки .work класса от вступления в силу: Измените селектор .work в CSS для ul.nav a.work, чтобы убедиться, что он будет иметь приоритет.

источник

2013-02-22 16:14:27 Barney

Да, это так. Удивительная помощь всем! –

Я бы переосмыслил ваш подход использовать селектор CSS:: hover вместо JS. Что-то вроде

ul.nav a { 
    background-color: blue; 
} 
ul.nav a:hover { 
    background-color: red; 
}

источник

2013-02-22 16:14:36

Спасибо. Я знаю, как это сделать в CSS, но я просто пытаюсь научить себя jQuery. Вы правы, хотя я часто использую этот подход в своих проектах. Спасибо –

Хорошо, я просто оставлю свой ответ здесь для кого-то, ищущего более легкий путь) –

Лучшая практика: пусть ваши стили обрабатываются CSS, когда это возможно. Вместо того, чтобы использовать эту функцию .work:

ul.nav a:hover { 
    color: white; 
    background-color: red; 
    position: absolute; 
    top: 100px; 
    left: 230px; 
}

И нет необходимости яваскрипта кода.

источник

2013-02-22 16:16:56 dfsq

Правильно, но я просто пытаюсь изучить jQuery, поэтому я сделал это, но СПАСИБО, –

jQuery Добавить/удалить класс

ответ

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