如何为指定jQuery脚本函数添加CSS类？附相关代码片段

嘿，我来帮你搞定这个问题！咱们一步步拆解，你已经有了一个.unselectable的CSS类，想要把它应用到脚本涉及的元素上，同时完善表格列显示/隐藏的逻辑对吧？

1. 先确认你的CSS类定义 #

这个禁止文本选中的CSS类写法没问题，我把它规整成易读的代码块：

.unselectable {
  -webkit-user-select: none; /* Chrome/Safari 全版本 */
  -moz-user-select: none;    /* Firefox 全版本 */
  -ms-user-select: none;     /* IE 10+ */
  user-select: none;         /* 标准语法，适配现代浏览器 */
}

2. 给元素添加CSS类的两种方式 #

静态添加（直接写在HTML里） #

如果是固定需要禁止选中的元素，比如复选框组或者表格表头，直接在HTML标签里加class="unselectable"就行：

<!-- 复选框容器示例 -->
<div id="grpChkBox">
  <input type="checkbox" name="col1" class="unselectable" /> 列1
  <input type="checkbox" name="col2" class="unselectable" /> 列2
</div>

<!-- 表格示例 -->
<table id="someTable">
  <thead>
    <tr>
      <th class="col1 unselectable">列1</th>
      <th class="col2 unselectable">列2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="col1">内容1</td>
      <td class="col2">内容2</td>
    </tr>
  </tbody>
</table>

动态添加（通过脚本控制） #

如果需要在脚本逻辑里（比如复选框点击时）动态给元素添加/移除这个类，咱们可以用jQuery的addClass()和removeClass()方法，同时我帮你补全原脚本里没写完的列隐藏逻辑：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
  var $chk = $("#grpChkBox input:checkbox");
  var $tbl = $("#someTable");
  
  // 初始全选复选框
  $chk.prop('checked', true);
  
  // 给所有复选框默认添加.unselectable类
  $chk.addClass('unselectable');
  
  $chk.click(function () {
    var colName = $(this).attr("name");
    var $colToToggle = $tbl.find("." + colName);
    
    // 切换列的显示/隐藏状态
    $colToToggle.toggle();
    
    // 可选：根据复选框状态，动态给列添加/移除禁止选中类
    if ($(this).is(':checked')) {
      $colToToggle.removeClass('unselectable');
    } else {
      $colToToggle.addClass('unselectable');
    }
  });
});
</script>

关键说明 #

• 用addClass('unselectable')可以给元素动态添加禁止选中的样式，removeClass()则移除该样式
• 原脚本里的colToHide变量定义不完整，我帮你补全了列选择和切换显示的核心逻辑
• 如果希望所有列固定不可选中，直接用静态添加类的方式就行；如果要和列的显示状态绑定，就用上面的动态控制逻辑

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