javascript - jQuery var 在传入 .click() 时变得未定义

Question

我正在努力从头开始构建一个愚蠢的简单 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">&#8698;</span>
        <span id="next">&#8699;</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 超出了范围？但是为什么其他变量要在这个函数内部工作呢？

Answer 1

在您的点击函数中，您将重新定义 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
    }
});