jQuery星级评分开发中如何在click函数外访问number评分变量

• 作用域限制：你在click事件回调函数内部用var声明的number属于函数局部变量，仅在回调函数内部可访问，外部作用域无法直接读取
• 执行时机错误：你写在click外面的console.log(number)会在DOM加载完成后立即执行，此时用户还没有触发星级点击操作，哪怕你把变量提出来，此时也只能拿到初始空值

把number变量的声明提升到整个$(document).ready的顶层作用域，后续所有位置都可以直接访问这个变量获取最新的评分数值：

$(document).ready(function () {
    // 顶层声明评分变量，当前作用域内所有位置都可访问
    var ratingNumber = 0;

    $(".li").mouseover(function () {
        var current = $(this);
        $(".li").each(function (index) {
            $(this).addClass("hovered-stars");
            if (index == current.index()) {
                return false;
            }
        })
    })
    $(".li").mouseleave(function () {
        $(this).removeClass("hovered-stars");
    })
    $(".li").click(function () {
        $(".li").removeClass("clicked");
        $(".hovered-stars").addClass("clicked");
        // 直接给顶层变量赋值
        ratingNumber = $(".clicked").length;
        $("#message").html("You rated " + ratingNumber + " Stars");
    })
    // 注意：此处直接打印只会拿到初始值0，需要在用户点击星级后再调用ratingNumber才能拿到有效评分
})

如果需要在其他业务逻辑里使用评分数值，要确保调用时机是在用户点击星级操作触发之后，否则拿到的会是初始的默认0值。

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