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

Question

正在创建 Stars 评级系统，我想访问评级数字并根据该数字执行操作。如何在我的 click 函数之外访问 number 变量？

$(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);
        })

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

Answer 1

你需要在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);
    })