jQuery更改类名答案

【问题标题】：jQuery change class namejQuery更改类名
【发布时间】：2011-03-28 00:52:56
【问题描述】：

我想根据 td 标签的 id 更改 td 标签的类：

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

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

【问题讨论】：

标签： jquery css

【解决方案1】：

使用jQuery 您可以使用.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.

【讨论】：

嘿@Nick，添加一个事件处理程序，找到第一个 td 父级 [var $td = $(this).parents('td:first')] 然后获取它的 id [var id = $td.attr('id');] 和类 [var class = $td.attr('class');] 因为他想要点击TD 内的元素来触发它
@Bob - 我不明白，你从哪里得到的，另一个问题？这个说他有元素的 ID :) 也可以使用 .closest('td') 而不是 .parents('td:first') :)
他的最后一句话：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 的 id 来更改类...
@Bob - 对...一些 other DOM 对象，您假设该对象在有问题的<td> 内:)
请注意，如果您使用toggleClass()，change_me 部分是可选的

【解决方案2】：

编辑：

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

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

【讨论】：

我不认为 OP 在 <td> 中，虽然他可能是，但请仔细阅读:)
@Nick - 是的，我添加了更新，因为我再次阅读并看到 OP 在询问 “如何获取 td 的 id 并更改...”。这让我相信 OP 没有处理 ID，这会使我原来的答案不是很有帮助。鉴于此，我假设带有处理程序的元素是嵌套的。但这肯定是一个假设。

【解决方案3】：

我想你正在寻找这个：

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

【讨论】：

【解决方案4】：

您可以查看addClass 或toggleClass

【讨论】：

【解决方案5】：

所以你想在点击它的时候改变它……让我来看看整个过程。假设您的“外部 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。希望这会有所帮助！

【讨论】：

【解决方案6】：

我想他想替换一个类名。

这样的事情会起作用：

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

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

【讨论】：

但他想在其他一些 dom 对象的点击事件中这样做

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

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

or

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

【讨论】：

【解决方案10】：

这个方法很适合我

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

【讨论】：

详细说明一下。

【解决方案11】：

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

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

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

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

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

【讨论】：

【解决方案12】：

使用 jquery 更改类

试试这个

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

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

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

【讨论】：

【解决方案13】：

这是使用jQuery的解决方案：

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

【讨论】：