Question

我只是在悬停时尝试并且无法随机更改特定单元格的背景颜色（然后在不活动时将颜色设置为灰色）。

我正在使用randomColor生成器，它在我的.hover（）中的setInterval循环中为我提供了正确的RGB格式，但我无法弄清楚为什么它不会改变颜色。 $（这）没有效果。我确定它是一个范围问题，我似乎无法得到它。

$(document).ready(function(){

  var setGridDimensions = function(r, c) {
    var html = '';
    for (var i = 0; i < r; i++) {
      html += '<div class="row">';
      for (var j = 0; j < c; j++) {
        html += '<div class="col"></div>';
      }
      html += '</div>';
    }

    $('#grid').html(html);
  };
  setGridDimensions(5, 5);


  $('.col').on('mouseenter', function(){
    function randomNumber() {
      return Math.floor(Math.random() * 255);
    }

    function randomColor() {
      var color =
      'rgb(' + randomNumber() + ',' + randomNumber() + ',' + randomNumber() + ')';
      return color;
    }

    setInterval(function(){
      console.log('mouseenter');

      $(this).css('background', randomColor());
      console.log(randomColor());
    },1000);

    // $(this).css('background', randomColor());
  }).on('mouseleave', function(){
    console.log('mouseleave');
    $(this).css('background', '#333');
  });
});

```

Answer 1

是的，这是一个范围问题。就像我评论的那样，我建议在控制台中使用断点来亲自看看。

setInterval的上下文是窗口，所以当你在该函数中调用$（this）时，“this”就是窗口（而不是你期望的.col）。另一种调用setInterval的方法是window.setInterval，这可能使得范围更加明显。

您可以通过在setInterval之前执行var button = $(this)然后执行button.css('background', randomColor());来解决此问题。整件事情看起来像是：

var button = $(this); // this is new
setInterval(function() {
    console.log('mouseenter');
    button.css('background', randomColor()); // no longer doing $(this)
    console.log(randomColor());
}, 1000);

此外，您的.on(mouseleave)不会停止间隔功能。确保明确结束setInterval。

如何在每1秒悬停时随机更改单元格颜色？

1 个答案: