JS：为什么我不能在嵌套函数中调用var变量？

Question

我有一个星级评定系统，我想捕获用户选择的值，然后将其通过AJAX发送到Server进行进一步处理。

我无法通过此代码来提醒所选星星的值：

$("fieldset input").click(function () {
                var radios = document.getElementsByName('rating');

                for (var i = 0, length = radios.length; i < length; i++) {
                    if (radios[i].checked) {
                        // do whatever you want with the checked radio
                        var review_stars = radios[i].value;

                        alert(review_stars);

                        // only one radio can be logically checked, don't check the rest
                        break;
                    }
                }
            });

但是如上所述，我需要将值保存到变量中，然后通过AJAX将其发送到后端。 因此，我将上面的代码插入另一个将执行AJAX部分的函数中，如下所示：

$("#send_review").click(function (e) {

            $("fieldset input").click(function () {
                var radios = document.getElementsByName('rating');

                for (var i = 0, length = radios.length; i < length; i++) {
                    if (radios[i].checked) {
                        // do whatever you want with the checked radio
                        var review_stars = radios[i].value;


                        // only one radio can be logically checked, don't check the rest
                        break;
                    }
                }
            });

            alert(review_stars);
 });

但是现在，我无法访问review_stars变量。 我无法提醒它的价值。 为什么？

更新1

更新了Trincot的答案，但未提醒值：

https://codepen.io/anon/pen/qvmwJb

Answer 1

在另一个单击处理程序中包含一个单击处理程序通常表明设计存在问题。

想一想：为什么在让用户单击“发送”按钮之前 ，您需要知道选中了哪个复选框？ 也许您有一个原因，但是您提供的代码没有显示出此类原因。

简而言之，您只需要在准备Ajax调用时执行任务，而不是在单击复选框时执行。 删除此行和相应的右括号：

$("fieldset input").click(function () {

...现在，您将在需要的地方拥有该变量： var声明为该变量提供了在其出现的函数中的作用域：

$("#send_review").click(function (e) {
    var radios = document.getElementsByName('rating');
    for (var i = 0, length = radios.length; i < length; i++) {
        if (radios[i].checked) {
            // do whatever you want with the checked radio
            var review_stars = radios[i].value;
            // only one radio can be logically checked, don't check the rest
            break;
        }
    }
    alert(review_stars);
});

当然，您也可以使用全局变量来解决它，但这并不是最佳实践，至少在这种情况下不是。

通过创建一个单独的函数来检索选中的复选框，可以使事情变得更容易：

function getReviewStars() {
    var radios = document.getElementsByName('rating');
    for (var i = 0, length = radios.length; i < length; i++) {
        if (radios[i].checked) {
            // do whatever you want with the checked radio
            var review_stars = radios[i].value;
            // only one radio can be logically checked, don't check the rest
            break;
        }
    }
    return review_stars; // <---- return it!
}

// And now you can call it whenever you want it:

$("#send_review").click(function () {
    alert(getReviewStars());
});
$("fieldset input").click(function () {
    alert(getReviewStars());
});

Answer 2

因为使用var声明的变量具有函数作用域 。因此应在全局作用域中声明review_stars

var review_stars;
$("#send_review").click(function (e) {

            $("fieldset input").click(function () {
                var radios = document.getElementsByName('rating');
                for (var i = 0, length = radios.length; i < length; i++) {
                    if (radios[i].checked) {
                        // do whatever you want with the checked radio
                        review_stars = radios[i].value;
                        // only one radio can be logically checked, don't check the rest
                        break;
                    }
                }
            });

Answer 3

JavaScript中的Var变量具有函数作用域。

review_stars范围设置为函数“字段集输入”内的单击处理程序

您所指的是超出其范围的review_stars

Answer 4

正如其他人所提到的，您遇到了范围问题。 您只需要在这些函数之外定义变量。

var review_stars;
$("#send_review").click(function (e) {

            $("fieldset input").click(function () {
                var radios = document.getElementsByName('rating');

                for (var i = 0, length = radios.length; i < length; i++) {
                    if (radios[i].checked) {
                        // do whatever you want with the checked radio
                        review_stars = radios[i].value;


                        // only one radio can be logically checked, don't check the rest
                        break;
                    }
                }
            });

            alert(review_stars);
});