使用model-viewer实现多热点按钮对应显隐div的问题求助

核心问题根源 #

你遇到的问题大概率是DOM选择逻辑错误：使用全局选择器（比如querySelector('.annotation')）时，默认只会匹配页面中第一个符合条件的元素；或者存在重复ID的情况，导致点击事件始终指向第一个注解div。

具体修复步骤 #

1. 重构HTML结构，建立热点与注解的唯一关联

给每个热点按钮添加data-target属性，对应目标注解div的唯一ID，确保关联关系明确：

<!-- model-viewer 内的热点按钮 -->
<button slot="hotspot-1" class="hotspot-btn" data-target="anno-1">热点1</button>
<button slot="hotspot-2" class="hotspot-btn" data-target="anno-2">热点2</button>

<!-- 对应的注解容器 -->
<div id="anno-1" class="annotation" style="display: none;">模型部件1的说明内容</div>
<div id="anno-2" class="annotation" style="display: none;">模型部件2的说明内容</div>

2. 修改JS事件绑定逻辑，精准定位目标元素

放弃全局选择器，通过当前点击按钮的data-target属性，直接获取对应的注解div：

// 批量绑定所有热点按钮的点击事件
document.querySelectorAll('.hotspot-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    // 获取当前按钮绑定的目标注解ID
    const targetId = this.dataset.target;
    const targetAnno = document.getElementById(targetId);
    
    // 切换显示/隐藏状态
    if (targetAnno.style.display === 'none') {
      // 可选：点击新热点时自动隐藏其他注解
      document.querySelectorAll('.annotation').forEach(anno => anno.style.display = 'none');
      targetAnno.style.display = 'block';
    } else {
      targetAnno.style.display = 'none';
    }
  });
});

额外排查点 #

• 检查页面中是否存在重复ID：打开浏览器控制台（F12），输入document.querySelectorAll('#重复的ID')，如果返回结果长度大于1，必须将ID修改为唯一值。
• 若使用model-viewer自带的<model-viewer>热点组件（非自定义button），需确保每个热点的slot属性唯一，且事件绑定通过document.querySelector('model-viewer').shadowRoot访问内部DOM元素。

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