我正在从头开始构建一个愚蠢的简单的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没有。
编辑:当我构建小提琴时,我看到弹出这个错误,说我的变量超出范围了?但是为什么其他变量也要在这个函数中工作呢?
发布于 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
}
});
发布于 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/
它是未定义的,因为它只是在该作用域中以后才创建的。其他变量也没问题,因为它们不会在该作用域中重新创建
发布于 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
复制相似问题