Javascript 当jQuery变量传递到时，它将变得未定义。单击（）

我正在从头开始构建一个愚蠢的简单jQuery图像滑块，没有使用任何大纲库或插件。我是jQuery新手，但是我遇到了一个看起来很愚蠢很简单的bug

我在.click（）函数外定义了一个变量，然后当我试图在.click（）函数内调用该变量时，它被认为是未定义的。奇怪的是我可以打电话给其他Var。有什么想法吗

以下是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;
    }
});

//设置目标
var next=$（“#next”）；
var prev=$（“#prev”）；
变量幻灯片=$（'.slider ul'）
//构建var以设置img长度的动画
var imgWidth=“-=”+（$（'.slider img'）.first（）.width（））；
//查找IMG的数量
var numOfSlides=$（'.slider ul li'）.length；
//将Slidecount设置为1
var slideCount=1；
//单击下一个btn时
下一步。单击（函数（）{
//检查控制台中的变量
console.log（numOfSlides+“Slides”）；
console.log（slideCount）；不要在else条件下初始化
slideCount
，只需在
slideCount
之前删除
var

当您在本地再次初始化同一变量时，则该变量的作用域为
从当前范围中删除变量并重新初始化（这是有限的
对于else范围，它将始终在else之外打印未定义的内容）


$（文档）.ready（函数（）{
//斯迪埃
//设定目标
var next=$（“#next”）；
var prev=$（“#prev”）；
变量幻灯片=$（'.slider ul'）
//构建var以设置img长度的动画
var imgWidth=“-=”+（$（'.slider img'）.first（）.width（））；
//查找IMG的数量
var numOfSlides=$（'.slider ul li'）.length；
//将Slidecount设置为1
var slideCount=1；
//单击下一个btn时
下一步。单击（函数（）{
//检查变量
//奇怪的是幻灯片正在打印
//但是slideCount被认为是未定义的。为什么？
console.log（numOfSlides+“Slides”）；
控制台日志（slideCount）；
//检查是否有更多幻灯片
if（slideCount

滑块{
利润率：20px0；
保证金：自动；
高度：500px；
最大宽度：1000px；
位置：相对位置；
溢出：隐藏；
}
.ul{
保证金：0；
填充：0；
列表样式：无；
宽度：9999px；
}
李先生{
浮动：左；
}
.slider#下一步，
.滑块#上一个{
位置：绝对位置；
字体大小：50px；
最高：50%；
转化：translateY（-50%）；
颜色：白色；
}
.滑块#下一个{
右：2%；
}
.滑块#上一个{
左：2%；
}








⇺
⇻
不要在else条件下初始化
slideCount
，只需在
slideCount

当您在本地再次初始化同一变量时，则该变量的作用域为
从当前范围中删除变量并重新初始化（这是有限的
对于else范围，它将始终在else之外打印未定义的内容）


$（文档）.ready（函数（）{
//斯迪埃
//设定目标
var next=$（“#next”）；
var prev=$（“#prev”）；
变量幻灯片=$（'.slider ul'）
//构建var以设置img长度的动画
var imgWidth=“-=”+（$（'.slider img'）.first（）.width（））；
//查找IMG的数量
var numOfSlides=$（'.slider ul li'）.length；
//将Slidecount设置为1
var slideCount=1；
//单击下一个btn时
下一步。单击（函数（）{
//检查变量
//奇怪的是幻灯片正在打印
//但是slideCount被认为是未定义的。为什么？
console.log（numOfSlides+“Slides”）；
控制台日志（slideCount）；
//检查是否有更多幻灯片
if（slideCount

滑块{
利润率：20px0；
保证金：自动；
高度：500px；
最大宽度：1000px；
位置：相对位置；
溢出：隐藏；
}
.ul{
保证金：0；
填充：0；
列表样式：无；
宽度：9999px；
}
李先生{
浮动：左；
}
.slider#下一步，
.滑块#上一个{
位置：绝对位置；
字体大小：50px；
最高：50%；
转化：translateY（-50%）；
颜色：白色；
}
.滑块#下一个{
右：2%；
}
.滑块#上一个{
左：2%；
}








⇺
⇻
问题在于，您正在使用此处的
var
关键字重新设置单击处理程序，从而将其范围限定在
slideCount
上：

else {
        // Animate margin to 0
        slides.animate({'margin-left': 0}, 1000);
        // Resent counter to 1
        var slideCount = 1; // <-- here
    }

else{
//将边距设置为0
幻灯片。动画（{'margin-left'：0}，1000）；
//重新发送计数器到1
var slideCount=1；//问题在于，通过使用
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
    }
});

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  
})();