jQuery的更改类名

...我希望能够在其他dom对象的c..."> ...我希望能够在其他dom对象的c..."/> ...我希望能够在其他dom对象的c..."> ...我希望能够在其他dom对象的c...">

jQuery的更改类名

jQuery的 CSS

阳光伽罗

2020-03-23

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

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

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

第2635篇《jQuery的更改类名》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答

猴子L 2020.03.23

您可以签出addClass或toggleClass

斯丁 2020.03.23

因此，您想在单击它时进行更改...让我完成整个过程。假设您的“外部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而不是值：