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

Question

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

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

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

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, пожалуйста?

--UPDATE--

Есть много DIV с Calss = «статус», так как я могу сказать JQuery, что я хочу изменить CSS, который я щелкнул.

--update 2--

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

--UPDATE 3--

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

--update 4 -

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

--update 5--

я переехал мой вопрос здесь. How to add a class depends on value with jquery

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

Answer 1

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

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

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

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

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

Это делает использование сцепления довольно красиво

Answer 2

.addClass() .removeClass()

EDIT: В réponse к ваше обновление, вы можете иметь функцию onclick() в вашем div, которая изменит класс для этого конкретного div.

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

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

Answer 3

Ваше простое решение было бы использовать встроенные функции переключения, в JQuery, который позволит вам изменить статус ваших указанных классов, используя стандартный синтаксис селекторов JQuery:

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

Смотрите doc page более

Answer 4

Что касается вашего первого вопроса, вы можете перенести этот класс на прилагаемый <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 5

Если вы не хотите, чтобы div, о котором вы просили, вы можете удалить его и выбрать все ссылки в пределах 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")