Jquery变量(单击函数内部)未全局显示

Question

希望你做得对。我有一个简单的代码来提高或降低星级&最后将结果存储为变量。但是我无法访问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>

非常感谢您的解决方案。

Answer 1

您可以访问点击事件处理程序之外的值。只是，它们没有初始化，这就是为什么将undefined和NaN作为输出的原因。

只有当文档ready运行时才会打印console，因此单击元素时无法获得输出。

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

$(document).ready(function() {
let $finalRating = 0;
$('.rating-link').on('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;
console.log($finalRating);
});
console.log($finalRating);
});

ul {
list-style-type: none;
}
ul li {
display: inline;
}
.rating-link {
cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css">
<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>

Answer 2

在$(document).ready(function()中，$finalRating的值基于$ratingCount($finalRating = 1 + $ratingCount;(的值。由于此时$ratingCount仍然是undefined，您将看不到它们中任何一个的值。

我认为考虑代码运行的顺序很重要。所有的$(document).ready(function()都将首先运行，然后在一段时间后，当用户单击其中一个<li>元素时，函数$('.rating-link').on('click', function()将运行。

因此，在点击事件之后编写的部分不会在任何点击完成之前发生，而不是在点击之后。为了能够跟踪值的变化，你可能希望做这样的事情：

$(document).ready(function() {
let $finalRating = 1;
let $ratingCount = 0;

//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;

updateFinalRating();
});

function updateFinalRating() {
//do something useful with the updated rating here

$finalRating = 1 + $ratingCount;
console.log('$ratingCount: ' + $ratingCount);
console.log('$finalRating: ' + $finalRating);
};
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li><span class="rating-link">Click me! (1)<i class="far fa-star rating"></i></span></li>
<li><span class="rating-link">Click me! (2)<i class="far fa-star rating"></i></span></li>
<li><span class="rating-link">Click me! (3)<i class="far fa-star rating"></i></span></li>
<li><span class="rating-link">Click me! (4)<i class="far fa-star rating"></i></span></li>
<li><span class="rating-link">Click me! (5)<i class="far fa-star rating"></i></span></li>
</ul>