Question

我想在给定td标签的id：

的情况下更改td标签的类

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

我希望能够在其他dom对象的click事件中执行此操作。我如何获取td的id并更改其类？

Answer 1

您可以使用.attr() 设置类（无论是），如下所示：

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

如果你想添加一个类，请改用.addclass()，如下所示：

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

使用.toggleClass()交换课程的简短方法：

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

Here's the full list of jQuery methods specifically for the class attribute

Answer 2

我认为你正在寻找这个：

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

Answer 3

我认为他想要替换一个班级名称。

这样的事情会起作用：

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

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

Answer 4

你可以这样做： $("#td_id").removeClass('Old_class'); $("#td_id").addClass('New_class'); 或者你可以这样做

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

Answer 5

您可以查看addClass或toggleClass

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

现在，每当你从select中选择一些内容时，它会自动找到一个带有匹配文本的单元格，允许你破坏整个基于id的进程。当然，如果你想这样做，你可以通过说

轻松地修改脚本以使用ID而不是值。

.filter("#"+useVal)

并确保适当添加ID。希望这有帮助！

Answer 7

修改

如果您说要从嵌套元素更改它，则根本不需要ID。你可以这样做：

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

http://api.jquery.com/closest/

http://api.jquery.com/parents/

原始回答：

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

另一种选择是：

$('#td_id').toggleClass('change_me some_other_class');

Answer 8

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

or

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

Answer 9

如果您已经有一个类并且需要在类之间交替而不是添加类，则可以链接切换事件：

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

Answer 10

这种方法适合我

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

Answer 11

我最好使用.prop来更改className，并且效果很好：

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

对于这一行代码，您只需要在下一个示例中更改newClass的名称，当然还要更改元素的ID：idelementinyourpage

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

顺便说一句，当您要搜索将哪种样式应用于任何元素时，只需在显示页面时在浏览器上单击F12，然后在DOM Explorer的选项卡中选择要查看的元素即可。现在，在“样式”中，您可以看到哪些样式应用于元素以及从哪个类读取其元素。

Answer 12

使用jQuery更改类

尝试

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

您还可以使用此查询设置任何属性

$('#selector_id').attr('Attribute Name','Attribute Value');

Answer 13

这是使用 jQuery 的解决方案：

$(document).ready(function(){
  if($('#td_id').hasClass('change_me')) {
    $('#td_id').removeClass('change_me').addClass('something_else');
  }
});

jquery更改类名

13 个答案: