Как я могу установить класс для элемента с помощью jQuery? Не хотите добавлять / удалять классы

#javascript #jquery #css

Вопрос:

Мне нужно установить класс для элемента на моей странице. С помощью обычного JavaScript я бы написал что-то вроде:

 document.getElementById('foo').className = "my_class";

Это просто устанавливает класс, который является именно тем, что я хочу. Но я использую jQuery на своей странице и поэтому хотел бы сделать это «способом jQuery», поскольку кажется странным смешивать старый стиль и стиль jQuery. Но jQuery, по-видимому, позволяет использовать только addClass () или removeClass (), вот так:

 $('#foo').addClass("my_class");

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

Ответ №1:

Чтобы удалить все классы из элемента:

 $('#foo').removeClass();

Не указывая аргументов для removeClass, удаляются все классы. Итак, ваше решение было бы:

 $('#foo').removeClass().addClass('my_class');

1. Если вы действительно хотите использовать функции «класса», то объедините свои операции в цепочку, нет необходимости повторно назначать новый $('#foo') объект: $('#foo').removeClass().addClass('my_class'); -1 за не оптимизированный и не отвечающий на вопрос на самом деле (это решение уже объяснено в вопросе)

2. На самом деле, я думал, что он ответил на мой вопрос довольно хорошо: функция removeClass () была ключом, о котором я не знал. Итак, я подумал, что это хороший ответ.

3. Да, извините, я думал, вы уже знали, что removeClass() удалит любой существующий класс, поскольку вы буквально вводили его таким образом в своем вопросе В любом случае, часть оптимизации важна, вы должны использовать методы, объединяющие в цепочку, когда это возможно.

4. Да, иначе вы выполняете два поиска в DOM.

Ответ №2:

Установите class атрибут напрямую с помощью .attr() :

 $('#foo').attr('class', 'my_class');

Ответ №3:

Вы могли бы использовать .attr() функцию следующим образом:

 $('#foo').attr('class', 'my_class');

Ответ №4:

Вы могли бы использовать это:

 $('#foo').attr('class', 'my_class');

Он заменит любой класс на «my_class»

Ответ №5:

  $('#foo').removeClass().addClass('my_class');

Ответ №6:

Ах, нашел ответ всего через несколько секунд после того, как опубликовал вопрос. Видимо, моих навыков в Google было недостаточно …

В любом случае, ответ находится в функции removeClass(). Итак, вы можете сделать:

 $('#foo').removeClass().addClass("my_class");

Проще и быть не может.

1. Вау, вы, ребята, быстрые: пока я набирал свой собственный ответ, несколько из вас уже ответили! Спасибо!

2. Как использовать, attr() не проще? Это всего лишь один вызов метода в отличие от двух отдельных вызовов.

3. attr () проще и, вероятно, быстрее, но у меня нет под рукой тестов.

Ответ №7:

вы можете попробовать использовать .toggleClass()