如何在jQuery事件处理器中访问变量（不使用window对象）

嘿，我来帮你搞定这两个问题！咱们先看看你代码里的核心问题：当前username和userSelection是各自点击事件里的局部变量，不仅外部的fetch拿不到，而且你的fetch在页面初始化时就直接执行了——这时候用户还没输入名字、没选下拉选项呢，肯定拿不到正确的值。

不用window（避免全局污染的不良实践）的话，我们可以利用闭包/函数作用域来共享变量，具体方案如下：

核心思路 #

把需要共享的变量声明在事件处理器的父作用域里（也就是$(function() { ... })这个jQuery就绪闭包内部），这样所有内部的事件处理器都能访问和修改这些变量，同时不会污染全局环境。

修改后的完整代码 #

$(function() {
  // 在闭包顶部声明变量，所有内部函数都能访问/修改
  let username = '';
  let userSelection = '';

  $("#search").on("click", function() {
    // 直接给闭包内的变量赋值，不要用var重新声明！
    username = $("#name").val();
    // 检查两个变量都有值时，再调用API请求
    if (username && userSelection) {
      fetchAnimeList();
    }
  });

  $(".dropdown-menu a").on("click", function() {
    const selectedText = $(this).text();
    $("button.dropdown-toggle").text(selectedText);
    // 同样赋值给闭包内的变量
    userSelection = selectedText;
    // 按需触发API请求
    if (username && userSelection) {
      fetchAnimeList();
    }
  });

  // 把API请求逻辑抽成单独函数，代码更整洁
  function fetchAnimeList() {
    const api = `https://api.jikan.moe/v3/user/${username}/animelist/${userSelection}`;
    fetch(api)
      .then(response => {
        // 记得处理HTTP错误
        if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
        return response.json();
      })
      .then(data => console.log("Success!", data))
      .catch(err => console.error("Failed to fetch data:", err)); // 不要漏掉错误处理
  }
})

针对你问题的具体解答 #

1. 主函数内事件处理器访问变量（不用window） #

通过提升变量作用域解决：把需要共享的变量声明在事件处理器的父作用域（比如这里的jQuery就绪闭包），利用JavaScript的闭包特性，内部的事件函数可以直接访问和修改这些变量，完全不需要依赖window全局对象。

2. jQuery事件处理器中访问username和userSelection #

就是上面代码的做法：

• 在$(function() {})闭包顶部声明变量，避免全局污染
• 事件处理器里直接给这些变量赋值（注意不要用var重新声明，否则会变成局部变量覆盖掉父作用域的变量）
• 把API请求逻辑封装成单独函数，在两个事件里按需调用（确保变量都有有效值再请求）

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