jquery - 在悬停时显示一个随机元素，Jquery

Question

每次我将鼠标悬停在 Logo 上时，我希望随机显示一个段落元素，并在鼠标离开时再次隐藏。

这是段落和 Logo 的 HTML:

<div>
<p class="quote" >ryan is a champion at indesign</p>
<p class="quote">ryan is not a champion at javascript</p>
<p class="quote">ryan likes ramen</p>
</div>

<a href="#"><img id="logo" src="../_blog/_assets/_logo_icons/_logo.png" alt="logo" /></a>

这个脚本是迄今为止我发现的最接近的脚本:

$('p.quote').hide();

var quotes = $('p.quote');
var rand = Math.floor(Math.random() * quotes.length);

$('#logo').hover(function(){
    quotes.eq(rand).toggle();

    });

不幸的是，除非我刷新页面，否则每次只会显示相同的报价。还有其他建议吗？

谢谢瑞安

Answer 1

将以 var rand 开头的行移到悬停函数中，而不是移到悬停函数之外。

然后改变:

quotes.eq(rand).toggle();

收件人:

quotes.hide().eq(rand).show();

您还需要修改 .hover() 以便在停止悬停时隐藏引号。

完整代码如下:

var quotes = $('p.quote');

$('#logo').hover(
  function() {
    var rand = Math.floor(Math.random() * quotes.length);
    quotes.hide().eq(rand).show();
  },
  function() {
    quotes.hide()
  }
);