jquery更改类名

aeq*_*aeq 326 css jquery

我想在给定td标签的id的情况下更改td标签的类:

<td id="td_id" class="change_me"> ...
Run Code Online (Sandbox Code Playgroud)

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

Nic*_*ver 687

您可以通过使用来设置类(无论它什么).attr(),如下所示:

$("#td_id").attr('class', 'newClass');
Run Code Online (Sandbox Code Playgroud)

如果要添加类,请.addclass()改为使用,如下所示:

$("#td_id").addClass('newClass');
Run Code Online (Sandbox Code Playgroud)

或者使用.toggleClass()以下方法交换类的简短方法:

$("#td_id").toggleClass('change_me newClass');
Run Code Online (Sandbox Code Playgroud)

以下是专门针对该class属性的jQuery方法的完整列表.


Fos*_*sco 86

我想你正在寻找这个:

$('#td_id').removeClass('change_me').addClass('new_class');
Run Code Online (Sandbox Code Playgroud)


小智 32

我想他想替换一个类名.

像这样的东西会起作用:

$(document).ready(function(){
    $('.blue').removeClass('blue').addClass('green');
});
Run Code Online (Sandbox Code Playgroud)

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


Ali*_*ali 9

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

$("#td_id").removeClass('Old_class').addClass('New_class');
Run Code Online (Sandbox Code Playgroud)


Kar*_*han 6

你可以看看addClasstoggleClass


Tra*_*ian 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>
Run Code Online (Sandbox Code Playgroud)

一些非常基本的CSS:

?#theTable td {
    border:1px solid #555;
}
.activeCell {
    background-color:#F00;
}
Run Code Online (Sandbox Code Playgroud)

并设置一个jQuery事件:

function highlightCell(useVal){
  $("#theTable td").removeClass("activeCell")
      .filter(":contains('"+useVal+"')").addClass("activeCell");
}

$(document).ready(function(){
    $("#test").change(function(e){highlightCell($(this).val())});
});
Run Code Online (Sandbox Code Playgroud)

现在,每当你从select中选择一些东西时,它会自动找到一个带有匹配文本的单元格,允许你破坏整个基于id的进程.当然,如果你想这样做,你可以通过说明来轻松地修改脚本以使用ID而不是值

.filter("#"+useVal)
Run Code Online (Sandbox Code Playgroud)

并确保适当添加ID.希望这可以帮助!


use*_*716 5

编辑:

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

$(this).closest('td').toggleClass('change_me some_other_class');
    //or
$(this).parents('td:first').toggleClass('change_me some_other_class');
Run Code Online (Sandbox Code Playgroud)

原答案:

$('#td_id').removeClass('change_me').addClass('some_other_class');
Run Code Online (Sandbox Code Playgroud)

另一种选择是:

$('#td_id').toggleClass('change_me some_other_class');
Run Code Online (Sandbox Code Playgroud)