Question

我正在使用这个简单的脚本来创建一个从mouseenter开始的滑块，它应该在mouseleave上停止：

$( ".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');

});

Slider开始很好但是在mouseleave-event上我收到控制台错误“Uncaught ReferenceError：test not defined”。我认为那是因为间隔的变量不在第二个函数中传递。有没有解决方案？

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

});

在两个函数之间传递变量

1 个答案: