jQuery var становится неопределенным, когда он переходит в .click ()

Question

Я работаю над созданием глупого простого слайдера изображений jQuery с нуля без использования библиотек контуров или плагинов.Я новичок в jQuery, но сталкиваюсь с ошибкой, которая кажется такой глупой простой.

Я определяю переменную вне функции .click (), а затем, когда я пытаюсь вызвать эту переменную внутри .click (), она считается неопределенной.Странно то, что я могу назвать другие переменные.Есть мысли?

Вот скрипка ползунка

Вот 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 показывает, что имеет значение, но это не slideCount, который не имеет.

EDIT : Когда я строил скрипку, я увидел эту всплывающую ошибку, в которой говорилось, что мой var находится вне области видимости?Но почему другой var собирается работать внутри этой функции?

Answer 1

Ваш 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 ограничена

Answer 2

Проблема в том, что вы определяете slideCount для обработчика кликов, переустанавливая его с помощью ключевого слова var здесь:

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

Если вы удалите это, это работает, так как браузертеперь «знает», что вы ссылаетесь на одну и ту же переменную, независимо от области действия здесь:

https://jsfiddle.net/hzu05xL4/

Она не определена, потому что она создается позже в этой области.С остальными переменными все в порядке, поскольку они не воссоздаются в этой области

Answer 3

Внутри функции щелчка вы переопределяете slideCount, поэтому этот новый будет использоваться внутри функции, а не во внешней.

Причина, по которой переменная равна undefined в вашем console.logэто механизм подъема : каждое объявление заносится в начало области.

Таким образом, для компилятора ваш код будет выглядеть как

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

Answer 4

Не инициализировать slideCount в другом состоянии. Просто удалите var до slideCount

Когда вы снова инициализируете ту же переменную в локальной сети, тогда область действия этой переменной удаляется из текущей области и повторноinitialize (который ограничен областью else. Он всегда будет печатать неопределенное за пределами else)

$(document).ready(function(){

    // SLDIER

    // 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
        // What's strange is the numOfSlides are printing
        // But slideCount is considered undefined. Why?
        console.log(numOfSlides + " Slides");
        console.log(slideCount);

        // 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
             slideCount = 1;
        }
    });
});

.slider {
    margin: 20px 0;
    margin: auto;
    height: 500px;
    max-width: 1000px;
    position: relative;
    overflow: hidden;
}
.slider ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 9999px;
}
.slider li {
    float: left;
}
.slider #next,
.slider #prev {
    position: absolute;
    font-size: 50px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
}
.slider #next {
    right: 2%;
}
.slider #prev {
    left: 2%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>