提问人：Sajedul Noman 提问时间：10/4/2020 更新时间：10/4/2020 访问量：364
Jquery变量（在点击函数内）未全局显示
Jquery variable(inside click function) is not showing globally
问：
希望你做对了。 我有一个简单的代码来增加或减少星级，最后将结果存储为变量。 但是我无法访问单击函数之外的变量。我已经在点击函数之外声明了变量。但是我得到的结果未定义。我没有在点击功能之外获得$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>
非常感谢您的解决方案。
答：
1赞
Pranav Rustagi
10/4/2020
#1
您可以在单击事件处理程序之外访问这些值。只是，它们没有被初始化，这就是为什么给予和作为输出。undefinedNaN
只有在文档运行时才会打印 you，因此在单击元素时无法获得输出。consoleready
除此之外，您还添加了很多不必要的代码，这不是一个好的做法。请看下面的代码：
$(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>
0赞
sbgib
10/4/2020
#2
在 中，的值基于 （） 的值。在这一点上，您不会看到它们中的任何一个的值。$(document).ready(function()$finalRating$ratingCount$finalRating = 1 + $ratingCount;$ratingCountundefined
我认为考虑代码运行的顺序很重要。所有函数将首先运行，然后，在那之后的一段时间内，当用户单击其中一个元素时，该函数将运行。$(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>
评论