jQuery实现按动态class编号匹配 点击切换对应li内容显隐

原有代码直接选中全局所有.pop_experts元素执行类修改，没有关联触发按钮和目标弹窗的共同动态编号标识，导致点击时全量切换所有弹窗，无法精准匹配对应项；同时原有CSS存在语法错误，.d-flex选择器前缺失类选择器标识.，样式无法正常生效。

核心逻辑：

• 点击打开按钮时，先从当前点击元素上提取pessoa-数字格式的动态类名，再精准选中同编号的.pop_experts元素执行显隐切换
• 点击关闭按钮时，通过DOM关联直接定位按钮所属的父级.pop_experts元素执行隐藏，不需要全局查找
• 修正CSS选择器语法错误，优化类名操作逻辑避免状态混乱

修复后完整代码 #

const $jqs = jQuery.noConflict();

// 关闭按钮逻辑
$jqs(".link_close").click(function(e) {
  e.preventDefault();
  // 定位当前关闭按钮所属的弹窗，单独执行关闭
  const $currentPop = $jqs(this).closest('.pop_experts');
  $currentPop.removeClass('d-flex').addClass('d-none');
});

// 打开按钮逻辑
$jqs(".open_div").click(function(e) {
  e.preventDefault();
  // 从当前按钮的class列表中提取pessoa-*格式的动态编号类
  const classList = $jqs(this).attr('class').split(/\s+/);
  const targetClass = classList.find(cls => cls.startsWith('pessoa-'));
  if (!targetClass) return;

  // 如需实现手风琴效果（同一时间仅打开一个弹窗），放开下一行注释即可
  // $jqs('.pop_experts').removeClass('d-flex').addClass('d-none');

  // 精准匹配同编号弹窗执行显示
  const $targetPop = $jqs(`.pop_experts.${targetClass}`);
  $targetPop.removeClass('d-none').addClass('d-flex');
});

.d-flex {
  display: flex;
}
.d-none {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <a class="open_div pessoa-1" href="javascript:;">pessoa-1</a>
  </li>
  <li>
    <a class="open_div pessoa-2" href="javascript:;">pessoa-2</a>
  </li>
  <li>
    <a class="open_div pessoa-3" href="javascript:;">pessoa-3</a>
  </li>
</ul>

<ul>
  <li class="pop_experts pessoa-1 d-flex"><a class="link_close" href="javascript:;">fechar</a>content by pessoa-1</li>
  <li class="pop_experts pessoa-2 d-none"><a class="link_close" href="javascript:;">fechar</a>content by pessoa-2</li>
  <li class="pop_experts pessoa-3 d-none"><a class="link_close" href="javascript:;">fechar</a>content by pessoa-3</li>
</ul>

• 打开逻辑通过类名过滤提取动态编号，不会误操作其他编号的弹窗
• 关闭逻辑通过closest()向上查找当前按钮所属的弹窗容器，实现单条关闭
• 给a标签补充href="javascript:;"，避免点击时页面默认跳转到顶部
• 预留手风琴模式开关，可根据业务需求选择是否开启

内容的提问来源于stack exchange，提问作者Fabricio Corrêa