jquery змінити назву класу

336

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

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

Я хочу бути в змозі зробити це під час події клацання якогось іншого об'єкта dom. Як схопити ідентифікатор td та змінити його клас?

jquery css

— аек
джерело

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?

- можливо я читаю це неправильно, можливо, він має на увазі використовувати ідентифікатор td для зміни класу ...

— Боб Фінхаймер

1

@Bob - Право ... якийсь інший об'єкт DOM, ви припускаєте, що об’єкт знаходиться <td>у питанні :)

— Нік Крейвер

Зауважте, що change_meдеталь є необов'язковою, якщо ви використовуєтеtoggleClass()

— sakisk

93

Я думаю, ти шукаєш цього:

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

— Фоско
джерело

32

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

Щось подібне спрацювало б:

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

від http://monstertut.com/2012/06/use-jquery-to-change-css-class/

— домкрат
джерело

Але він хотів зробити це всередині події клацання якогось іншого об'єкта dom

— keyser

9

Ви можете це зробити: $("#td_id").removeClass('Old_class'); $("#td_id").addClass('New_class'); Або ви можете це зробити

$("#td_id").removeClass('Old_class').addClass('New_class');

— Аліреза Масалі
джерело

6

Ви можете перевірити addClass або toggleClass

— Карл Йохан
джерело

6

Тож ви хочете змінити це, коли на нього натискають ... дозвольте мені пройти весь процес. Припустимо, що ваш "Зовнішній об'єкт DOM" - це вхід, як обраний:

Почнемо з цього 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)

і переконайтеся, що правильно додати ідентифікатори. Сподіваюсь, це допомагає!

— Трафальмадоріан
джерело

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');

— користувач113716
джерело

Я не думаю, що ОП всередині <td>, хоча він може бути, перечитайте уважно :)

— Нік Крейвер

@Nick - Так, я додав оновлення, тому що я прочитав його ще раз і побачив, що ОП запитує "Як я схоплю ідентифікатор td та змінити ..." . Це змусило мене повірити в те, що в ОП немає ідентифікатора, який би зробив мою оригінальну відповідь не дуже корисною. Враховуючи це, я припускаю, що елемент із обробником вкладений. Але це, безумовно, припущення.

— користувач113716

2

У випадку, якщо у вас вже є клас і вам потрібно чергувати класи на противагу додаванню класу, ви можете ланцюжок переключити події:

$('li.multi').click(function(e) {
    $(this).toggleClass('opened').toggleClass('multi-opened');
});

— lentyai
джерело

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, елемент, який ви хочете бачити. У стилях тепер ви можете бачити, які стилі застосовані до вашого елемента та з якого класу його читання.

— Алексіс Гассан
джерело