jQuery的更改类名

336

我想更改给定td标签ID的td标签的类：

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

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

jquery css

— 当量
source

704

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

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

如果要添加类，请.addclass()改用，如下所示：

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

或者是使用.toggleClass()以下方法交换类的简便方法：

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

这是专门针对classattribute 的jQuery方法的完整列表。

— 尼克Craver
source

嘿@Nick，添加一个事件处理程序，该事件处理程序找到第一个td父对象[ var $td = $(this).parents('td:first')]，然后获取其id [ var id = $td.attr('id');]和类[ var class = $td.attr('class');]，因为他希望TD内的click元素触发它

— Bob Fincheimer 2010年

@Bob-我不关注，您从哪里得到另一个问题？这个人说他有这个元素的ID ：）还可以使用父母.closest('td')代替.parents('td:first')：）

— Nick Craver

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的ID来更改课程...

— 鲍勃·芬奇海默

1

@Bob-对... 其他一些DOM对象，您假设该对象<td>在有问题的内部:)

— Nick Craver

请注意，change_me如果您使用该部件，则该部件是可选的toggleClass()

— sakisk '16

93

我认为您正在寻找这个：

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

— 福斯科
source

32

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

这样的事情会起作用：

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

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

— 插口
source

但是他想在其他dom对象的点击事件中进行操作

— 键盘输入2012年

9

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

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

— 阿里雷扎·马萨里（Alireza Masali）
source

6

您可以签出addClass或toggleClass

— 卡尔·约翰
source

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

现在，只要您从选择项中选取某项，它就会自动找到带有匹配文本的单元格，使您可以破坏整个基于id的过程。当然，如果您想这样做，则可以轻松地修改脚本以使用ID而不是值，方法是说

.filter("#"+useVal)

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

— 特拉法尔曼式
source

4

编辑：

如果您要说是要从嵌套元素更改它，则根本不需要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');

— 用户名
source

我不认为OP <td>可能在内部，尽管他可能会仔细阅读：)

— Nick Craver

@Nick-是的，我添加了更新，因为我再次阅读了该更新，并发现OP正在询问“我如何获取td的ID并进行更改...”。这使我相信OP在ID上没有句柄，这会使我的原始答案没有太大帮助。鉴于此，我假设带有处理程序的元素是嵌套的。但这当然是一个假设。

— user113716 2010年

2

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

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

— 伦泰
source

2

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

or

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

— 普拉布
source

1

这种方法对我来说很好

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

— Puterafx Fx
source

对此进行一些详细说明。

— 飞机

0

使用jQuery更改类

尝试这个

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

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

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

— 爱库玛
source

-1

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

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

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

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

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

— 亚历克西斯·加桑（Alexis Gassan）
source