Как изменить CSS с помощью jquery?

Question

У меня есть следующий HTML-код, динамически генерируемый PHP.Когда я нажимаю на активный, он меняется на неактивный и наоборот.

Я добавил div class = 'status' для манипулирования jquery.(Нужно ли это? Могу ли я сделать это без этого div?)

Я хочу изменить CSS class = 'status' на class = 'inactive', когда я нажимаю active и когда я нажимаю inactive, изменяя класс CSS на«активный», так что я могу изменить цвет или добавить изображение BG и т. д.

HTML

...
...    
<tr valign='top'>
  <td align='center'>21</td>
  <td>Kontakt</td>
  <td>/kontakt.html</td>
  <td align='center'>
     <div class="status">
       <a href="http://127.0.0.1/ci/index.php/admin/pages/changePageStatus/21">active</a>
     </div>
  </td>
  <td align='center'>...
  ...
  </td>
</tr>

Я использую jquery, и мне нужно некоторое руководство.

Может кто-нибудь сказать мне какой-нибудь код jquery, пожалуйста?

- ОБНОВЛЕНИЕ -

Есть много div с calss = 'status', так как я могу сказать jquery, чтоЯ хочу изменить CSS, который я нажал.

- ОБНОВЛЕНИЕ 2 -

Я хочу проверить значение (активное / неактивное).И добавьте это значение как класс.ex Если его значение активно, то добавьте css class = 'active', а если оно неактивно, то class = 'inactive' и т. д. Могу ли я это сделать?Или у вас есть другие предложения, как мне это сделать.

- ОБНОВЛЕНИЕ 3 -

Спасибо всем.Вы, ребята, молодцы.Я проверил некоторые из кодов.Но проблема в том, что, когда я нажимаю активный, он меняет bg, но затем обновляет страницу, чтобы перейти в неактивный через php / mysql.Так что это означает, что каждый раз, когда я нажимаю, значение (активное / неактивное) изменяется.Так что я думаю, как я уже говорил в обновлении 2, было бы неплохо добавить класс css в зависимости от значения.Дополнительные предложения приветствуются, и я ценю их.(Я еще не сделал это с AJAX ...)

- ОБНОВЛЕНИЕ 4 -

Использование ID не очень хорошая идея, поскольку таблица создается динамически.Я могу добавить идентификаторы, но это добавит больше кода.Поэтому я подумал, что класс лучше.

- ОБНОВЛЕНИЕ 5 -

Я перенес свой вопрос сюда. Способ добавления класса зависит от значения с помощью jquery

После этого я теперь знаю, что хочу сделать.

Answer 1

jQuery имеет функции toggleclass (), removeClass () и addClass (). Это должно помочь вам в этом.

Не видя весь HTML, немного сложно предложить селектор. Если бы вы присвоили идентификатор вашему div (например, mydiv), вы могли бы получить

$("#mydiv").removeClass('status').addClass('inactive');

Или просто перевернуть их независимо от того:

$("#mydiv").toggleClass('status').toggleClass('inactive');

Это очень хорошо использует цепочку

Answer 2

Что касается вашего первого вопроса, вы, вероятно, могли бы переместить этот класс на включающий <td /> (хотя фоновые изображения там не всегда хорошо воспроизводятся).

Чтобы добавить / удалить класс с помощью jquery, вы можете сделать что-то вроде этого:

$('div.status').addClass('inactive');
$('div.status').removeClass('status');

Или, если вы хотите, чтобы он срабатывал при клике, используйте toggleClass

$('div.status', 'div.inactive').live("click", function(){
    $(this).toggleClass("inactive").toggleClass("status");
        });

Это также будет срабатывать только на конкретном div.status (или неактивном), который вы щелкнете.

Answer 3

Самое простое решение - использовать встроенные функции переключения в jQuery, которые позволят вам переключать состояние указанных классов с помощью стандартного синтаксиса селектора jQuery:

$(this).toggleClass("inactive");

См. страницу документа для получения дополнительной информации

Answer 4

.addClass () .removeClass ()

РЕДАКТИРОВАТЬ: В ответ на ваше обновление, вы можете иметь функцию onclick () в вашем div, которая будет изменять класс для этого конкретного div.

<div onclick="changeClass" id="myId"></div>
function changeClass() { 
   $(this).toggleClass('status').toggleClass('inactive'); 
}

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

Answer 5

Если вам не нужен div, о котором вы спрашивали, вы можете удалить его и выбрать все ссылки внутри td (или добавить класс к определенным тегам td и настроить селектор: $ ('td.status'), чтобы сузить выбор только для тех).

//Click Handler to toggle active state of all links descendant of all td tags
$("td a").click(function(){
 //add/remove inactive class and add/remove active smoothly over 1/2 second in total
 $(this).toggleClass("inactive, 250").toggleClass("active", 250);
});

Примечание

$ ("td a") выберет всех потомков тега. Чтобы получить только дети теги тд:

$("td > a")