如何通过添加类在td内显示圆形及解决点击添加类的覆盖问题

嘿，先给你澄清一个常见误区：jQuery的addClass()方法根本不会覆盖元素原有的类，它只是把新类追加到元素的class属性里而已。你看到的样式变化，其实是CSS优先级在起作用——类选择器（.outpatient）的优先级比元素选择器（table td）高，所以当你给td加上outpatient类后，类里的background-color: yellow就会覆盖td默认的aqua背景，这是CSS的正常表现哦。

其实你的代码已经能实现点击单元格变成黄色圆形的效果啦！不过如果想要更灵活或者避免样式冲突，我给你两个优化方向：

方向1：让样式更清晰地叠加 #

如果希望保留td原有的边框等样式，只修改背景和圆角，你可以让.outpatient只定义需要改动的属性，其他属性自动继承自table td的样式，这样代码更简洁：

table td {
  width: 20px;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  border: 1px solid gray;
  text-align: center;
  padding: 5px;
  cursor: pointer;
  background-color: aqua;
}
.outpatient {
  background-color: yellow; /* 只替换背景色 */
  border-radius: 50%; /* 加上圆形圆角 */
}

方向2：支持点击切换状态 #

如果想要点击单元格可以来回切换（点一次变黄色圆形，再点一次变回默认样式），那把addClass()换成toggleClass()就搞定了，它会自动帮你切换类的添加和移除：

$(function() {
  $("td").click(function() {
    $(this).toggleClass('outpatient');
  });
});

完整可运行代码示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
table td {
  width: 20px;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  border: 1px solid gray;
  text-align: center;
  padding: 5px;
  cursor: pointer;
  background-color: aqua;
}
.outpatient {
  background-color: yellow;
  border-radius: 50%;
}
</style>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>
<script>
$(function() {
  $("td").click(function() {
    $(this).addClass('outpatient'); // 换成toggleClass就能实现切换
  });
});
</script>

总的来说，你的初始代码已经能满足需求啦，addClass()并没有覆盖原有类，只是CSS优先级导致了背景色的变化。如果需要切换效果，换成toggleClass()就好啦～

内容的提问来源于stack exchange，提问作者Heisenberg