Javascript Jquery变量（单击函数内部）未全局显示

希望你做得对。 我有一个简单的代码来增加或减少星级&最后将结果存储为一个变量。 但我无法访问click函数之外的变量。我已经在click函数之外声明了变量。但是我得到了一个未定义的结果。我没有得到点击功能之外的$ratingCount。我的代码如下所示：

$(document).ready(function(){
        let $finalRating;
         let $ratingCount; 
//if user wants to increase rating   
        $('.rating-link').on('click', function(){           
            $(this).children('.rating').addClass('fas');
            $(this).children('.rating').removeClass('far');
            $(this).parent('li').prevAll().find('.rating').addClass('fas');
            $(this).parent('li').prevAll().find('.rating').removeClass('far');
//if user wants to lower rating
            $(this).parent('li').prevAll().children('.rating-link').on('click', function(){ 
                $(this).parent('li').nextAll().find('.rating').addClass('far');
                $(this).parent('li').nextAll().find('.rating').removeClass('fas');
            });
            $ratingCount = $(this).parent('li').prevAll().find('.rating').length;                         
        });
        $finalRating = 1 + $ratingCount;  
        console.log($ratingCount);
        console.log($finalRating); 
    });

HTML格式如下：

<ul>
    <li><span class="rating-link"><i class="far fa-star rating"></i></span></li>
    <li><span class="rating-link"><i class="far fa-star rating"></i></span></li>
    <li><span class="rating-link"><i class="far fa-star rating"></i></span></li>
    <li><span class="rating-link"><i class="far fa-star rating"></i></span></li>
    <li><span class="rating-link"><i class="far fa-star rating"></i></span></li>
</ul>

---

非常感谢您的解决方案。

您可以访问click事件处理程序之外的值。只是，它们没有初始化，这就是为什么将

undefined

和

NaN

作为输出

只有在运行document

ready

时才会打印

控制台

，因此在单击元素时无法获得输出

除此之外，您还添加了许多不必要的代码，这不是一个好的做法。请查看下面的代码：

$（文档）.ready（函数（）{
设$finalRating=0；
$（'.rating link'）。在（'click'，function（）上{
$（this）.find（'.rating'）.addClass（'fas'）.removeClass（'far'）；
var wrap=$（this.parent（'li'）；
wrap.prevAll（）.find（'.rating'）.addClass（'fas'）.removeClass（'far'）；
wrap.nextAll（）.find（'.rating'）.addClass（'far'）.removeClass（'fas'）；
$finalRating=wrap.prevAll（）.addBack（）.find（'.rating'）.length；
控制台日志（$finalRating）；
});
控制台日志（$finalRating）；
});
ul{
列表样式类型：无；
}
ulli{
显示：内联；
}
.评级链接{
光标：指针；
}







在
$（document）.ready（function（）
）中，
$finalRating
的值基于
$ratingCount
（
$finalRating=1+$ratingCount；
）的值。由于
$ratingCount
此时仍然是
未定义的
，您将看不到它们的值

我认为重要的是要考虑代码运行的顺序。所有的代码> $（文档）.Read（函数）<代码>将首先运行，然后，在用户单击一个<代码> < LI> < /C>元素时，函数<代码> $（'.RealLink）。（点击），函数（）（代码）>将运行。
因此，在单击事件之后写入的零件不会在单击完成之前发生，而不会在单击完成之后发生。为了能够在值更改时跟踪这些值，您可能希望执行以下操作：


$（文档）.ready（函数（）{
设$finalRating=1；
设$ratingCount=0；
//如果用户想要提高评级
$（'.rating link'）。在（'click'，function（）上{
$（this）.children（'.rating'）.addClass（'fas'）；
$（this）.children（'.rating'）.removeClass（'far'）；
$（this.parent（'li'）.prevAll（）.find（'rating'）.addClass（'fas'）；
$（this.parent（'li'）.prevAll（）.find（'.rating'）.removeClass（'far'）；
//如果用户想要降低评级
$（this）.parent（'li'）.prevAll（）.children（'rating link'）。on（'click'，function（））{
$（this.parent（'li'）.nextAll（）.find（'.rating'）.addClass（'far'）；
$（this.parent（'li'）.nextAll（）.find（'.rating'）.removeClass（'fas'）；
});
$ratingCount=$（this）.parent（'li'）.prevAll（）.find（'.rating'）.length；
updateFinalRating（）；
});
函数updateFinalRating（）{
//在这里对更新的评级做一些有用的事情
$finalRating=1+$ratingCount；
log（“$ratingCount:”+$ratingCount）；
log（'$finalRating:'+$finalRating）；
};
})；


点击我！（1）
点击我！（2）
点击我！（3）
点击我！（4）
点击我！（5）
您得到的输出是什么？您没有初始化变量，因此当您尝试在单击函数外添加或显示变量时，这些变量没有值。@FluffyKitten即使在单击事件后没有初始化变量，它也会有值。关键是如何验证更改没有反映出来。