试图访问 jQuery 中函数外的数字变量

trying to access number variable outside the function in jQuery

正在创建星级评分系统,我想访问评分编号并根据该评分执行操作。如何在我的点击功能之外访问数字变量?

$(document).ready(function () {
            $(".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");
                var number = $(".clicked").length;
                $("#message").html("You rated " + number + " Stars");
            })
            console.log(number);
        })

目前无法在点击事件侦听器外打印数字变量

需要在click函数外声明number变量,然后在click函数内重新赋值

$(document).ready(function () {
        var number=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");
            number = $(".clicked").length;
            $("#message").html("You rated " + number + " Stars");
        })
        console.log(number);
    })