jquery изменить имя класса

336

Я хочу изменить класс тега td, учитывая идентификатор тега td:

<td id="td_id" class="change_me"> ...

Я хочу быть в состоянии сделать это, находясь внутри события click какого-либо другого объекта dom. Как мне получить идентификатор тд и изменить его класс?

jquery css Aeq
источник

Ответы:

704

Вы можете установить класс (независимо от того, что это было ) с помощью .attr(), например, так:

$("#td_id").attr('class', 'newClass');

Если вы хотите добавить класс, используйте .addclass()вместо этого, как это:

$("#td_id").addClass('newClass');

Или короткий способ поменять класс с помощью .toggleClass():

$("#td_id").toggleClass('change_me newClass');

Вот полный список методов jQuery специально для classатрибута .

Ник Крейвер
источник
Привет @Nick, добавь обработчик события, который находит первого родителя td [ var $td = $(this).parents('td:first')], затем получает его id [ var id = $td.attr('id');], а также класс [ var class = $td.attr('class');], потому что он хочет, чтобы элемент клика внутри TD
вызывал
@Bob - я не понимаю, откуда ты это взял, другой вопрос? Этот говорит, что у него есть идентификатор элемента :) Также, чтобы получить родителя, которого вы можете использовать .closest('td')вместо .parents('td:first'):)
Ник Крейвер
1
его последнее предложение: I want to be able to do this while inside the click event of some other dom object. How do I grab the td's id and change its class?- может быть, я неправильно читаю, может быть, он хочет использовать идентификатор тд для изменения класса ...
Боб Финхеймер
1
@Bob - Правильно ... какой-то другой объект DOM, вы предполагаете, что этот объект находится внутри рассматриваемого <td>вопроса :)
Ник Крейвер
Обратите внимание, что change_meчасть является необязательной, если вы используетеtoggleClass()
sakisk
93

Я думаю, что вы ищете это:

$('#td_id').removeClass('change_me').addClass('new_class');
Fosco
источник
32

Я думаю, что он хочет заменить имя класса.

Примерно так будет работать: 

$(document).ready(function(){
    $('.blue').removeClass('blue').addClass('green');
});

с http://monstertut.com/2012/06/use-jquery-to-change-css-class/

разъем
источник
Но он хотел сделать это в событии click какого-нибудь другого объекта dom
keyser
9

Вы можете сделать это: $("#td_id").removeClass('Old_class'); $("#td_id").addClass('New_class'); или вы можете сделать это

$("#td_id").removeClass('Old_class').addClass('New_class');
Алиреза Масали
источник
6

Таким образом, вы хотите изменить его, когда он нажал ... позвольте мне пройти через весь процесс. Давайте предположим, что ваш «Внешний DOM-объект» является входом, как select:

Давайте начнем с этого HTML:

<body>
  <div>
    <select id="test">
      <option>Bob</option>
      <option>Sam</option>
      <option>Sue</option>
      <option>Jen</option>
    </select>
  </div>

  <table id="theTable">
    <tr><td id="cellToChange">Bob</td><td>Sam</td></tr>
    <tr><td>Sue</td><td>Jen</td></tr>
  </table>
</body>

Некоторые очень простые CSS:

​#theTable td {
    border:1px solid #555;
}
.activeCell {
    background-color:#F00;
}

И установите событие jQuery:

function highlightCell(useVal){
  $("#theTable td").removeClass("activeCell")
      .filter(":contains('"+useVal+"')").addClass("activeCell");
}

$(document).ready(function(){
    $("#test").change(function(e){highlightCell($(this).val())});
});

Теперь, когда вы выбираете что-то из выбора, он автоматически находит ячейку с соответствующим текстом, что позволяет вам подорвать весь процесс на основе идентификатора. Конечно, если вы хотите сделать это таким образом, вы можете легко изменить скрипт для использования идентификаторов, а не значений, сказав

.filter("#"+useVal)

и убедитесь, что добавили идентификаторы соответствующим образом. Надеюсь это поможет!

Trafalmadorian
источник
4

РЕДАКТИРОВАТЬ:

Если вы говорите, что вы заменяете его из вложенного элемента, вам вообще не нужен идентификатор. Вы можете сделать это вместо этого:

$(this).closest('td').toggleClass('change_me some_other_class');
    //or
$(this).parents('td:first').toggleClass('change_me some_other_class');

Оригинальный ответ:

$('#td_id').removeClass('change_me').addClass('some_other_class');

Другой вариант:

$('#td_id').toggleClass('change_me some_other_class');
user113716
источник
Я не думаю, что ОП внутри <td>, хотя он может быть, перечитайте внимательно :)
Ник Крэйвер
@Nick - Да, я добавил обновление, потому что я прочитал его снова и увидел, что OP спрашивает: «Как мне получить идентификатор и изменить тд ...» . Это заставило меня поверить, что у ОП нет идентификатора, что сделало бы мой первоначальный ответ не очень полезным. Учитывая это, я предполагаю, что элемент с обработчиком является вложенным. Но это, безусловно, предположение.
user113716
2

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

$('li.multi').click(function(e) {
    $(this).toggleClass('opened').toggleClass('multi-opened');
});
Лентяй
источник
2 
$('.btn').click(function() {
    $('#td_id').removeClass();
    $('#td_id').addClass('newClass');
});

or

$('.btn').click(function() {
    $('#td_id').removeClass().addClass('newClass');
});
Прабху
источник
1

этот метод хорошо работает для меня

$('#td_id').attr('class','new class');
Puterafx Fx
источник
Сделайте некоторые детали об этом.
самолет
0

изменить класс с помощью jquery

попробуй это

$('#selector_id').attr('class','new class');

Вы также можете установить любой атрибут, используя этот запрос

$('#selector_id').attr('Attribute Name','Attribute Value');
Люблю кумар
источник
-1

Я лучше использую .prop, чтобы изменить className, и он работал отлично:

$(#td_id).prop('className','newClass');

для этой строки кода вам просто нужно изменить имя newClass и, конечно, идентификатор элемента в следующем примере: idelementinyourpage

$(#idelementinyourpage).prop('className','newClass');

Кстати, когда вы хотите найти, какой стиль применяется к любому элементу, вы просто нажимаете F12 в браузере, когда отображается ваша страница, а затем выбираете на вкладке DOM Explorer элемент, который хотите увидеть. В Styles теперь вы можете видеть, какие стили применяются к вашему элементу и из какого класса он читается.

Алексис Гассан
источник