jQuery的更改类名_编程黑洞网

我想根据td标签的ID更改td标签的类：目的。如何获取TD的ID并更改其类别？

#1 楼

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

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

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

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

或者使用.toggleClass()交换类的一种简短方法：专门用于class属性的jQuery方法。

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

–鲍勃·芬克海默（Bob Fincheimer）
2010年8月10日19:56

@Bob-我不明白，另一个问题是什么？这个人说他有该元素的ID ：）另外，要获取父对象，可以使用.closest（'td'）代替.parents（'td：first'）:)

–尼克·克拉弗♦
2010年8月10日19:58

他的最后一句话：我希望能够在其他dom对象的click事件中执行此操作。如何获取TD的ID并更改其类别？ -也许我读错了，也许他的意思是使用TD的ID来更改课程...

–鲍勃·芬克海默（Bob Fincheimer）
2010年8月10日19:59

@Bob-对...其他一些DOM对象，您假设该对象位于相关的中：）

–尼克·克拉弗♦
2010年8月10日在20:01

请注意，如果使用toggleClass（），change_me部分是可选的

–sakisk
16/12/16在14:11

#2 楼

我认为您正在寻找这个：

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

#3 楼

我想他想替换一个类名。

类似的方法将起作用：

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

2012/06 / use-jquery-to-change-css-class /

但他想在其他dom对象的click事件中执行此操作

– Keyser
2012年10月20日，9：20

#4 楼

您可以这样做：

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

或者您可以这样做

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

#5 楼

您可以签出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())});
});

现在，每当您从选择中选择内容时，它将自动找到具有匹配文本的单元格，从而使您可以颠覆基于id的整个过程。当然，如果您希望这样做，可以通过说出

.filter("#"+useVal)

轻松地修改脚本以使用ID而非值，并确保添加ID适当地。希望这会有所帮助！

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

我不认为OP在内，尽管他可能在里面，但请仔细阅读:)

–尼克·克拉弗♦
2010年8月10日在20:05

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

–user113716
2010-08-10 20:09

#8 楼

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

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

对此进行一些详细说明。

–飞机
18年1月24日在7:59

#11 楼

使用jquery更改类

尝试使用

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

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

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

#12 楼

我最好使用.prop来更改className，并且它可以完美地工作：元素的ID（在下一个示例中）：在浏览器上显示页面时，然后在DOM Explorer的选项卡中选择要查看的元素。现在，在“样式”中，您可以看到哪些样式应用于您的元素，以及从哪个类读取它。

编程黑洞网

jQuery的更改类名