如何实现点击一组链接触发同ID的另一组隐藏链接点击？

嘿，我明白你的需求了——隐藏的第一组链接要在点击第二组对应链接时被触发点击。这里有两种靠谱的实现方式，看你偏好哪种：

方式一：用自定义数据属性（推荐，更清晰易维护） #

这种方法不用费劲解析ID，直接给第二组链接加个data-target-id属性，明确指定要触发的第一组链接ID，后续动态生成也方便。

第一步：调整HTML结构 #

给第二组的每个链接加上对应第一组链接ID的data-target-id：

<!-- 可见的第二组链接 -->
<div class="set2">
  <ul>
    <li><a href="javascript:void(0);" class="set2-link" data-target-id="radio-test10-2">Link 1 (Visible)</a></li>
    <li><a href="javascript:void(0);" class="set2-link" data-target-id="radio-test20-2">Link 2 (Visible)</a></li>
    <!-- 更多链接... -->
  </ul>
</div>

<!-- 隐藏的第一组链接 -->
<div class="set1" style="display:none;">
  <div class="alm-filter alm-filter--taxonomy" id="alm-filter-2">
    <ul>
      <li><a href="javascript:void(0);" class="alm-filter--link field-radio field-test10" id="radio-test10-2">Link 1</a></li>
      <li><a href="javascript:void(0);" class="alm-filter--link field-radio field-test20" id="radio-test20-2">Link 2</a></li>
      <!-- 更多链接... -->
    </ul>
  </div>
</div>

第二步：添加JavaScript监听 #

用原生JS给第二组的所有链接绑定点击事件，触发对应第一组链接的点击：

// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
  // 获取第二组所有链接
  const set2Links = document.querySelectorAll('.set2-link');
  
  set2Links.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault(); // 阻止默认跳转行为
      // 获取要触发的目标链接ID
      const targetId = this.getAttribute('data-target-id');
      // 找到第一组对应的隐藏链接
      const targetLink = document.getElementById(targetId);
      
      if (targetLink) {
        // 触发隐藏链接的点击事件
        targetLink.click();
        console.log(`已触发隐藏链接：${targetId}`);
      } else {
        console.warn(`未找到ID为${targetId}的隐藏链接`);
      }
    });
  });
});

方式二：通过ID解析匹配（无法修改HTML结构时用） #

如果没办法给第二组链接加自定义属性，那就只能通过解析ID里的共同标识来匹配。比如第一组ID是radio-{标识}-{数字}，第二组ID是{标识}-link，我们提取中间的标识部分来找到对应链接。

假设第二组链接ID是test10-link，对应第一组的radio-test10-2：

document.addEventListener('DOMContentLoaded', function() {
  const set2Links = document.querySelectorAll('.set2 a');
  
  set2Links.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      // 从第二组链接ID提取匹配标识（示例：ID为test10-link，提取test10）
      const linkId = this.id;
      const targetKey = linkId.split('-')[0]; // 这里根据你的实际ID结构调整分割规则
      
      // 找到第一组中包含该标识的链接
      const targetLink = document.querySelector(`.set1 a[id*="${targetKey}"]`);
      
      if (targetLink) {
        targetLink.click();
        console.log(`已触发隐藏链接：${targetLink.id}`);
      } else {
        console.warn(`未找到包含${targetKey}的隐藏链接`);
      }
    });
  });
});

适配动态生成链接的补充方案 #

如果你的链接是通过AJAX等方式动态生成的，需要用事件委托来绑定点击事件，避免新生成的链接无法触发逻辑：

// 事件委托版本，支持动态生成的链接
document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('.set2').addEventListener('click', function(e) {
    // 只处理第二组的链接元素
    if (e.target.classList.contains('set2-link')) {
      e.preventDefault();
      const targetId = e.target.getAttribute('data-target-id');
      const targetLink = document.getElementById(targetId);
      if (targetLink) targetLink.click();
    }
  });
});

这样不管后续动态添加多少链接，都能正常触发对应的隐藏链接点击啦～

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