jQuery + CSS: переключиться на «загрузку»

Question

У меня есть следующие настройки:

<div class="click red"></div>
<div class="click green"></div>
<div class="click blue"></div>

и когда нажата кнопка «click», я хочу добавить класс «load» в div. Я справился с этим нормально, но у «красного», «зеленого» и «синего» все установлено фоновое изображение, поэтому мне нужно удалить этот класс. Теперь я знаю, как сделать это неаккуратным способом, я беру класс для dib "click blue" (как возвращает jquery), а затем убираю то, что мне нужно, и заменяю его , но это невероятно небрежно и я не вижу, чтобы это был правильный метод.

Как правильно подходить к этому? Мне нужно удалить второй класс из div и заменить его классом «load». Есть ли какой-нибудь метод для вызова каждого класса в отдельности, .attr ("class") [2]?

Answer 1

Если вы знаете, что класс «щелкает», вы можете установить класс, а не добавлять / удалять его, например:

$('div').attr('class', 'click load');

Если вы знаете классы (не уверены, что это упрощенный пример), которые вы хотите удалить, вы можете сделать это:

$("div").removeClass('red green blue').addClass('load');

---

Редактировать: на основе комментариев - Вы можете сохранить класс с помощью $.data() и захватить его позже, чтобы восстановить после загрузки, например:

В вашей функции клика:

$.data(this, 'class', $(this).attr('class')); //store the original class
$(this).attr('class', 'click load');          //set loading class

Затем, чтобы восстановить его позже:

$(this).attr('class', $.data(this, 'class')); //restore orignal class