交付兩種功能

Question

我使用這個簡單的腳本來創建一些滑塊，上了mouseenter開始，哪些應該之間的可變停在鼠標離開：

$(".grid-item").mouseenter(function() { 

    var slides = $(this).find(".slide-image"), 
     counter = 0; 

    var test = setInterval(function(){ 
    slides.removeClass('active'); 
    slides.eq(counter).addClass('active'); 
    counter++; 

    if (counter > slides.length) {counter = 0;}; 
    }, 600); 

}).mouseleave(function() { 

    clearInterval(test); 
    // $(".slide-image").removeClass('active'); 

}); 

的滑塊開始相當不錯，但在鼠標離開事件我「M得到控制檯錯誤‘未捕獲的ReferenceError：測試沒有定義’。我認爲這是因爲間隔的變量沒有在第二個函數中傳遞。有沒有解決方法？

Check out my CodePen!（它工作正常，在這裏）

Answer 1

聲明你的變量test功能外

var test; 
$(".grid-item").mouseenter(function() { 

    var slides = $(this).find(".slide-image"), 
     counter = 0; 

    test = setInterval(function(){ 
    slides.removeClass('active'); 
    slides.eq(counter).addClass('active'); 
    counter++; 

    if (counter > slides.length) {counter = 0;}; 
    }, 600); 

}).mouseleave(function() { 

    clearInterval(test); 
    // $(".slide-image").removeClass('active'); 

});