jQuery中如何为同class名的指定元素添加新CSS类？

原代码的核心问题 #

• jQuery文档就绪语法错误：应该用$(document).ready()而非document.ready()
• 原生DOM元素调用jQuery方法：$(".logo-slider .logos .logo")[0]返回原生HTML元素，没有jQuery的.addClass()方法
• 函数作用域限制：setActive()定义在ready回调内部，全局的onclick事件无法访问到这个局部函数
• 缺少索引灵活性：硬编码了索引0，无法满足指定任意索引的需求

修复后的完整代码 #

HTML #

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/css/bootstrap-grid.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" onclick="setActive(0)">标记索引0为激活状态</button>
<button type="button" onclick="setActive(1)">标记索引1为激活状态</button>
<div class="logo-slider">
  <div class="logos row">
    <div class="col"><img class="logo" src="https://placehold.jp/3d4070/ffffff/150x150.png" /></div>
    <div class="col"><img class="logo" src="https://placehold.jp/3d4070/f4ffff/150x150.png" /></div>
    <div class="col"><img class="logo" src="https://placehold.jp/3d4070/ff6fff/150x150.png" /></div>
    <div class="col"><img class="logo" src="https://placehold.jp/3d4070/ffffff/150x150.png" /></div>
    <div class="col"><img class="logo" src="https://placehold.jp/3d4070/ffffff/150x150.png" /></div>
  </div>
</div>

CSS #

.active {
  border: 1px solid red;
}

JavaScript #

$(document).ready(function() {
  window.setActive = function(index) {
    // 可选：移除所有logo的active类，确保只有当前目标处于激活状态
    $(".logo-slider .logos .logo").removeClass("active");
    // 用.eq()选取指定索引的jQuery元素，添加激活类
    $(".logo-slider .logos .logo").eq(index).addClass("active");
  }
})

修复细节说明 #

1. 修正文档就绪写法：确保DOM完全加载完成后再执行函数绑定逻辑
2. 全局暴露函数：将setActive挂载到window对象上，让按钮的onclick事件能正常调用到该函数
3. 正确选取目标元素：使用.eq(index)方法获取对应索引的jQuery对象，这是解决原生元素无法调用jQuery方法的关键
4. 支持动态索引：函数接收index参数，可通过不同按钮指定不同的目标Logo；移除所有激活类的逻辑可根据需求保留或删除（若需要允许多个Logo同时激活，删除该行即可）

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