如何基于动态生成的元素ID选择对应class的DOM元素？

别担心，这个需求其实很好实现，我一步步给你讲清楚～

核心逻辑 #

• 点击带有动态ID的.somename元素时，先获取它的ID值
• 根据这个ID值，筛选出所有class中包含该ID的.divclass元素
• 对筛选出的元素执行你需要的操作（比如显示/隐藏、样式修改等）

具体实现代码 #

原生JavaScript方案（无依赖） #

首先给所有.somename绑定点击事件，然后通过属性选择器精准定位目标元素：

// 获取所有.somename元素
const somenameDivs = document.querySelectorAll('.somename');

// 遍历每个元素绑定点击事件
somenameDivs.forEach(div => {
  div.addEventListener('click', function() {
    // 获取当前点击元素的动态ID
    const targetId = this.id;
    
    // 用[class~="值"]语法精确匹配包含该ID的完整class项
    // 这样不会误匹配类似ID为3时，class里的"13"这种情况
    const targetElements = document.querySelectorAll(`.divclass[class~="${targetId}"]`);
    
    // 这里执行你的操作，示例为切换元素的隐藏/显示状态
    targetElements.forEach(el => {
      el.classList.toggle('hidden');
      // 如果你想直接修改样式也可以：
      // el.style.display = el.style.display === 'none' ? 'block' : 'none';
    });
  });
});

jQuery方案（更简洁） #

如果你的项目已经引入了jQuery，代码会更短更直观：

$('.somename').on('click', function() {
  const targetId = $(this).attr('id');
  // 直接用属性选择器定位目标元素，并切换显示状态
  $(`.divclass[class~="${targetId}"]`).toggle();
});

关键注意事项 #

• 数字开头的class/ID规范问题：HTML标准里class不能以数字开头（ID在HTML5里允许，但class不允许），虽然现代浏览器能兼容，但可能有潜在兼容性问题。如果可以修改WordPress的输出，建议给ID和class加前缀，比如id="page-3"、class="divclass page-3"，这样选择器就改成[class~="page-${targetId}"]，更符合规范。
• 动态生成元素的处理：如果这些.somename是后来动态加载的（比如WordPress的加载更多功能），建议用事件委托，这样新添加的元素也能响应点击：

// 假设所有.somename都在#parent-container这个父容器内
document.querySelector('#parent-container').addEventListener('click', function(e) {
  // 找到点击元素最近的.somename父元素
  const clickedDiv = e.target.closest('.somename');
  
  if (clickedDiv) {
    const targetId = clickedDiv.id;
    const targetElements = document.querySelectorAll(`.divclass[class~="${targetId}"]`);
    targetElements.forEach(el => el.classList.toggle('hidden'));
  }
});

如果还有哪里不明白，随时问我哦～

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