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

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

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

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

287
css jquery

11 ответов

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

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

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

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

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

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

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

605

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

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

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

что-то вроде этого будет работать: 

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

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

26

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

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

вы можете ознакомиться addClass или toggleClass

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())});
});

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

.filter("#"+useVal)

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

6

EDIT:

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

$(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');
4
$('.btn').click(function() {
    $('#td_id').removeClass();
    $('#td_id').addClass('newClass');
});

or

$('.btn').click(function() {
    $('#td_id').removeClass().addClass('newClass');
});
2

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

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

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

$('#td_id').attr('class','new class');
0

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

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

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

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

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

0