Question

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

我无法用此代码提醒所选星星的值：

$("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

由于用<DOC> <ID>12345</ID> <RAW>George Washington lived in a house called Mount Vernon</RAW> </DOC>声明的变量具有函数作用域。您应在全局作用域中声明var

review_stars

Answer 3

JavaScript中的变量具有功能范围。

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

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

4 个答案: