我正在努力从头开始构建一个愚蠢的简单 jQuery 图像 slider ,不使用大纲库或插件。我是 jQuery 的新手,但我遇到了一个看起来如此愚蠢简单的错误。
我在 .click() 函数之外定义了一个 var,然后当我尝试在 .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 显示为具有值,但幻灯片计数却没有。
编辑: 当我构建 fiddle 时,我看到这个错误弹出,说我的 var 超出了范围?但是为什么其他变量要在这个函数内部工作呢?
最佳答案
在您的点击函数中,您将重新定义 slideCount
,因此这个新函数将在函数内部使用,而不是在外部函数中使用。
变量在 console.log
中未定义
的原因是 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
}
});
关于javascript - jQuery var 在传入 .click() 时变得未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50728575/