当jQuery变量传递到.click()中时，它变得未定义
我正在从头开始构建一个愚蠢的简单的jQuery图像滑块，没有使用轮廓库或插件。我是jQuery的新手，但我遇到了一个看起来如此愚蠢和简单的bug。
我在.click()函数外部定义了一个变量，然后当我试图在.click()内调用该变量时，它被认为是未定义的。奇怪的是，我可以调用其他var。有什么想法吗？
Here is a fiddle of the slider
下面是HTML：
<div class="slider">
<ul>
<li><img class="slide img-fluid" src="http://via.placeholder.com/1000x500?text=1"></li>
<li><img class="slide img-fluid" src="http://via.placeholder.com/1000x500?text=2"></li>
<li><img class="slide img-fluid" src="http://via.placeholder.com/1000x500?text=3"></li>
<li><img class="slide img-fluid" src="http://via.placeholder.com/1000x500?text=4"></li>
<li><img class="slide img-fluid" src="http://via.placeholder.com/1000x500?text=5"></li>
</ul>
<span id="prev">⇺</span>
<span id="next">⇻</span>
</div>这是JS
// Set Targets
var next = $('#next');
var prev = $('#prev');
var slides = $('.slider ul')
// Build the var to animate the length of the img
var imgWidth = "-=" + ($('.slider img').first().width());
// Find number of imgs
var numOfSlides = $('.slider ul li').length;
// Set Slidecount to 1
var slideCount = 1;
// When next btn is clicked
next.click(function(){
// Check vars in console
console.log(numOfSlides + " Slides");
console.log(slideCount); <-------------- This is being marked as undefined
// Check to see if there are more slides
if (slideCount < numOfSlides) {
// Slide the images
slides.animate({'margin-left': imgWidth}, 1000);
// Add one to slide count
slideCount++;
// If there are no more images, reset margin to 0 and return to first
} else {
// Animate margin to 0
slides.animate({'margin-left': 0}, 1000);
// Resent counter to 1
var slideCount = 1;
}
});当我单击下一个箭头时，我会在控制台中看到打印的内容--这很奇怪，因为numOfSlides显示为有值，但slideCount没有。
编辑：当我构建小提琴时，我看到弹出这个错误，说我的变量超出范围了？但是为什么其他变量也要在这个函数中工作呢？
回答 3
Stack Overflow用户
发布于 2018-06-07 04:13:46
在单击函数内部，您正在重新定义slideCount，因此这个新的are将在函数内部使用，而不是外部函数。
变量在console.log上为undefined的原因是hoisting mechanism：每个声明都被带到作用域的开头。
因此，对于编译器来说，您的代码将如下所示
next.click(function(){
var slideCount; <----- hoisted here, value is undefined for now
console.log(slideCount); <------- This is still undefined
// Check to see if there are more slides
if (slideCount < numOfSlides) {
// ...
// Add one to slide count
slideCount++; <----- like undefined++
} else {
// ...
// Resent counter to 1
slideCount = 1; <---- initialized for the first time
}
});Stack Overflow用户
发布于 2018-06-07 04:04:22
问题在于，通过在此处使用var关键字重新设置slideCount，您可以将其作用域限定为单击处理程序：
else {
// Animate margin to 0
slides.animate({'margin-left': 0}, 1000);
// Resent counter to 1
var slideCount = 1; // <-- here
}如果你删除它，它就会工作，因为浏览器现在“知道”你引用的是同一个变量，而不管这里的作用域是什么：
https://jsfiddle.net/hzu05xL4/
它是未定义的，因为它只是在该作用域中以后才创建的。其他变量也没问题，因为它们不会在该作用域中重新创建
Stack Overflow用户
发布于 2018-06-07 04:50:42
您的var为undefined，因为：
var a = 1; //-> defined at the top of global code
a = 2;
console.log(a); //2
(function(){
console.log(a);//undefined
var a = 3; // -> at a top of function code but undefined till now
})();如果删除了var，则可以使用以前的var定义。是未定义的，因为声明是在执行任何代码之前处理的，而且var声明的作用域也是限定的(在这种情况下，第二个声明只存在于函数内部)。稍后会处理= 3。另外，var声明的作用域也是
https://stackoverflow.com/questions/50728575
复制相似问题