DWG文件链接跳转登录页功能异常排查及代码修改咨询

问题根源 #

原有代码存在2个核心逻辑缺陷：

• document.querySelector仅会匹配到第一个符合选择器规则的DOM元素，所以只有首个跳转链接绑定了点击事件，其余元素不会被选中处理
• 只给.pdf-redirect类的元素绑定了登录跳转逻辑，没有覆盖所有DWG文件对应的.dwg-disabled类元素

修改后完整代码 #

{% if customer %}
  <script>
    // 已登录状态：移除DWG链接的禁用状态和跳转拦截
    const dwgLinks = document.querySelectorAll('.dwg-disabled');
    const redirectBtns = document.querySelectorAll('.pdf-redirect');
    redirectBtns.forEach(btn => btn.classList.remove('pdf-redirect'))
    dwgLinks.forEach(link => link.classList.remove('dwg-disabled'))
  </script>
{% endif %}

<script>
  // 未登录状态：给所有需要跳转登录的链接绑定事件
  const allNeedRedirectElems = document.querySelectorAll('.pdf-redirect, .dwg-disabled')
  allNeedRedirectElems.forEach(elem => {
    elem.addEventListener('click', (e) => {
      // 阻止默认的文件下载/跳转行为
      e.preventDefault()
      window.location.href = '/account/login'
    })
  })
</script>

修改点说明 #

• 把单个元素选择的querySelector全部替换为批量选择的querySelectorAll，遍历所有匹配元素做统一处理
• 未登录状态的跳转逻辑同时覆盖.pdf-redirect和.dwg-disabled两类元素，确保所有DWG文件链接都能触发登录跳转
• 新增e.preventDefault()阻止链接默认行为，避免未登录时直接触发文件下载

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