jquery - 在事件上重新生成随机数

Question

$(document).ready(function() {
  var randomRed = Math.floor(Math.random() * 255);
  var randomGreen = Math.floor(Math.random() * 255);
  var randomBlue = Math.floor(Math.random() * 255);
  $('p').mouseover(function() {
      $('p').css('color', 'rgb(' + randomGreen + ',' + randomBlue + ',' + randomRed + ')');
  });
  $('p').mouseout(function() {
      $('p').css('color', 'black');
  });
});​

我有上面的代码，它在鼠标悬停时生成随机颜色，然后在鼠标悬停时将其返回为黑色，效果很好。但是，它会在每次鼠标悬停时生成相同的随机颜色。

如何使它在每个鼠标悬停事件上生成不同的随机颜色？

Answer 1

这是因为您只在文档加载而不是悬停事件时生成颜色：

$(document).ready(function() {
    $('p').mouseover(function() {
        var randomRed = Math.floor(Math.random() * 255);
        var randomGreen = Math.floor(Math.random() * 255);
        var randomBlue = Math.floor(Math.random() * 255);
        $('p').css('color', 'rgb(' + randomGreen + ',' + randomBlue + ',' + randomRed + ')');
    });
    $('p').mouseout(function() {
        $('p').css('color', 'black');
    });
});

Answer 2

只需将数字生成声明为​​函数并在您的事件中调用它：

$(document).ready(function() {
    function randomNumber(){
        return  Math.floor(Math.random() * 255)
    }

    $('p').mouseover(function() {
        $('p').css('color', 'rgb(' + randomNumber()+ ',' + randomNumber()+ ',' + randomNumber()+ ')');
    });
    $('p').mouseout(function() {
        $('p').css('color', 'black');
    });
});

您还可以使用 .hover() 简化事件定义：http: //api.jquery.com/hover/

Answer 3

像这样试试

$(document).ready(function() {
function randomNumber(){
return  Math.floor(Math.random() * 255)
}

$('p').mouseover(function() {
    $('p').css('color', 'rgb(' + randomNumber()+ ',' + randomNumber()+ ',' +     randomNumber()+ ')');
});
$('p').mouseout(function() {
      $('p').css('color', 'black');
    });
});