嗨，这是事件执行顺序的问题呀！我来给你拆解清楚：

先看你提供的代码：

var hours;
var months;
$(document).ready(function() {
    $('.priceprev-border').click(function(e) {
        hours = e.target.textContent;
        $(this).addClass("active");
        console.log(hours); // 输出正确
    });
    $('.priceprev-bordermonth').click(function(e) {
        months = e.target.textContent;
        $(this).addClass("active");
        console.log(months); // 输出正确
    });
    console.log(hours, months);// 输出: undefined, undefined
});

问题根源 #

你写的那行console.log(hours, months)是在页面加载完成后立刻执行的，而点击事件的回调函数是只有当用户主动点击对应元素时才会触发。具体执行顺序是这样的：

1. 页面加载完成，$(document).ready里的代码从上到下运行：先完成两个点击事件的绑定，然后立刻执行那行console.log——这时候用户还没点击任何元素，hours和months还是一开始声明的未赋值状态，自然输出undefined。
2. 只有等用户后续点击了元素，才会进入对应的点击回调函数，给hours/months赋值，这时候回调内部的console.log能拿到正确值，但这时候外部那行console.log早就运行完了。

解决办法 #

如果你想查看或者使用这两个变量的最新值，有几种简单的处理方式：

• 把业务逻辑放到点击回调内部：比如如果要根据选中的时长做后续操作，直接在点击事件里调用相关逻辑：

  var hours;
  var months;
  
  // 把需要用变量的逻辑封装成函数
  function handleSelectedTime() {
      console.log(hours, months); // 这里能拿到最新的赋值
      // 比如提交表单、更新页面内容等操作都可以写在这里
  }
  
  $(document).ready(function() {
      $('.priceprev-border').click(function(e) {
          hours = e.target.textContent;
          $(this).addClass("active");
          handleSelectedTime(); // 点击后触发逻辑
      });
      $('.priceprev-bordermonth').click(function(e) {
          months = e.target.textContent;
          $(this).addClass("active");
          handleSelectedTime(); // 点击后触发逻辑
      });
  });
  

• 监听变量变化（进阶）：如果你的项目逻辑比较复杂，也可以用自定义事件或者状态管理的方式，当变量更新时触发事件，其他需要用到变量的地方监听这个事件获取最新值。不过对于你的场景来说，第一种方法已经足够简单好用了。

核心总结就是：变量的赋值是在用户点击之后才发生的，而你之前的console.log在赋值动作之前就已经执行了，所以拿不到预期的值~

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