用数组随机更改鼠标输入/输出上的文本？

Question

我有一个非常简单但令人沮丧的问题。基本上我想要做的是当你鼠标输入和输出特定元素时，元素文本将通过数组随机更改。这是我的代码，从 HTML 开始：

<div class="logo">
    <a href="#">
        luke <span>whitehouse</span> 
    </a>
    <span class="logo-note">// front-end web designer</span>
</div>

这是 JS：

$(document).ready(function() {
    var quotes = new Array("foo", "bar", "baz", "chuck");
    var randno = Math.floor ( Math.random() * quotes.length );
    $('.quote').add(quotes[randno]);

    $('.logo a').mouseover(function() {
        $('.logo-note').text(quotes[randno]);
    }).mouseout(function() {
        $('.logo-note').text(quotes[randno]);
    });
});

Answer 1

当鼠标悬停/移出事件发生时，您需要获取随机文本。在您的代码中，randno 计算一次并且永远不会更改，因此您每次都会得到相同的数组元素。试试这个想法

$('.logo a').mouseover(function() {
        $('.logo-note').text(quotes[Math.floor ( Math.random() * quotes.length )]);
    }).mouseout(function() {
        $('.logo-note').text(quotes[Math.floor ( Math.random() * quotes.length )]);
    });