如何在jQuery中仅为当前点击元素添加类而不作用于其他同级元素

要实现任意时刻只有一个指定div处于激活展示状态，核心逻辑是点击时先清空所有同级元素的激活状态，再单独为当前匹配的目标元素添加激活类，避免多个元素同时生效的问题。

你现有代码存在两处明显问题：

• hasClass(".show")语法错误，hasClass方法参数直接传入类名即可，不需要加.前缀
• 未提前清空其他元素的激活类，会导致多个元素同时带有is-visible类，状态不同步

HTML代码 #

<div class="c-card">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
</div>

jQuery代码 #

以下代码默认你已经在点击事件上下文里正确获取到cid和cvid两个匹配参数：

$(".js-sidebar-video-link-single-in-conversation").on("click", function(){
  // 第一步：重置所有child元素的状态，清空激活类、统一隐藏
  $(".child").removeClass("is-visible").hide();

  // 第二步：筛选出符合video-id和video-number匹配规则的目标元素
  const targetChild = $(".child").filter(function() {
    const videoID = $(this).data("video-id");
    const cvid2 = $(this).data("video-number");
    return videoID === cid && cvid === cvid2;
  });

  // 第三步：仅为匹配到的目标元素添加激活类、设置显示
  targetChild.addClass("is-visible").show();

  // 兼容原有show类判断逻辑
  if (targetChild.hasClass("show")) {
    $(".in-conversation .is-visible").siblings().hide();
  }
});

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