在JavaScript鼠标悬停事件中引用this时遇到赋值错误求助

嘿，我来帮你揪出问题根源，顺便给你搞定需求！

首先，你报错的原因很明确：你把onmouseover事件绑定在了下载按钮本身（那个带downLoad_link类的<a>标签）上，这时候事件里的this就是这个下载按钮元素。你接着用this.getElementsByClassName('downLoad_link')，相当于在这个按钮内部找同样类名的子元素——但它自己就是这个类，根本没有符合条件的子元素，所以返回的集合是空的，取[0]自然就是undefined，才会抛出那个错误。

而你的核心需求是「获取某一唯一链接的href，赋值给所有下载按钮」，那正确的逻辑应该是这样的：

正确实现步骤 #

1. 把mouseover事件绑定在提供href的那个唯一链接上，而不是下载按钮
2. 在事件函数里拿到这个唯一链接的href
3. 批量获取所有下载按钮，把它们的href统一替换成目标链接

代码示例 #

写法1：内联事件（和你原来的写法风格一致）

<!-- 这是你的唯一链接，给它绑定mouseover事件 -->
<a href="https://www.example.com/your-real-url" onmouseover="updateAllDownloadBtns(this)" class="unique-source-link">
  鼠标移到我这里，所有下载按钮就会获取我的链接
</a>

<!-- 多个下载按钮 -->
<a href="" class="downLoad_link" download>下载文件1</a>
<a href="" class="downLoad_link" download>下载文件2</a>
<a href="" class="downLoad_link" download>下载文件3</a>

<script>
function updateAllDownloadBtns(sourceLink) {
  // 拿到唯一链接的href
  const targetUrl = sourceLink.href;
  // 获取所有下载按钮
  const downloadBtns = document.querySelectorAll('.downLoad_link');
  // 遍历给每个按钮赋值href
  downloadBtns.forEach(btn => {
    btn.href = targetUrl;
  });
}
</script>

写法2：现代事件监听（更推荐的JS写法）

如果不想用内联事件，也可以用标准的事件监听方式，代码更清晰：

<a href="https://www.example.com/your-real-url" class="unique-source-link">
  鼠标移到我这里，所有下载按钮就会获取我的链接
</a>

<a href="" class="downLoad_link" download>下载文件1</a>
<a href="" class="downLoad_link" download>下载文件2</a>

<script>
// 找到唯一链接元素
const sourceLink = document.querySelector('.unique-source-link');
// 绑定mouseover事件
sourceLink.addEventListener('mouseover', function() {
  const targetUrl = this.href;
  // 批量更新所有下载按钮的href
  document.querySelectorAll('.downLoad_link').forEach(btn => btn.href = targetUrl);
});
</script>

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