如何制作一个随机选择事件的数组，可能吗？ （重新创建谷歌我感觉很幸运按钮）

Question

我正在重新制作 google 我感觉很幸运的动画，我只是想知道如何在我的按钮上显示这些事件之一，但让它随机选择它的高度。他们的工作方式是我有一个最大高度的按钮，我隐藏了溢出。 html 和 css 都很好，我只是想让 jQuery 随机选择其中一个元素。

$('.mainbutton:nth-child(2)').hover(function() { //jQuery
  var list = $(".mainbutton ul").toArray();
  var elemlength = list.length;
  var randomnum = Math.floor(Math.random() * elemlength);
  var randomitem = list[randomnum];

  $('.' + randomitem).css('bottom', '-170px');
  $('.' + randomitem).css('bottom', '-130px');
  $('.' + randomitem).css('bottom', '-100px');
  $('.' + randomitem).css('bottom', '-70px');
  $('.' + randomitem).css('bottom', '-40px');
  $('.' + randomitem).css('bottom', '-10px');
  $('.' + randomitem).css('bottom', '-180px');
  $('.' + randomitem).css('bottom', '-220px');
  $('.' + randomitem).css('bottom', '-250px');
  $('.' + randomitem).css('bottom', '-170px');
  $('.' + randomitem).css('bottom', '-170px');
});

.mainbutton {
  padding: 0px 0px;
  background: #f2f2f2;
  border-width: 0px;
  border-style: solid;
  border-radius: 2px;
  font-weight: bold;
  font-size: 12px;
  margin: 29 6px;
  color: #757575;
  overflow: hidden;
  position: relative;
  height: 34px;
  width: 144px;
  box-sizing: inherit;
}
.mainbutton:nth-child(1) {
  bottom: 13px;
}
.mainbutton ul li {
  list-style-type: none;
  padding: 8px 10px;
  text-align: left;
}
.mainbutton ul {
  padding-left: 10%;
  position: absolute;
  bottom: -160px;
  width: 144px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search-buttons" align="center">
  <button class="mainbutton">Google Search</button>
  <button class="mainbutton">
    <ul>
      <li>I'm Feeling Stellar</li>
      <li>I'm Feeling Artistic</li>
      <li>I'm Feeling Wonderful</li>
      <li>I'm Feeling Curious</li>
      <li>I'm Feeling Hungry</li>
      <li>I'm Feeling Lucky</li>
      <li>I'm Feeling Doodley</li>
      <li>I'm Feeling Generous</li>
      <li>I'm Feeling Trendy</li>
      <li>I'm Feeling Puzzled</li>
      <li>I'm Feeling Playful</li>
    </ul>
  </button>
</div>

Answer 1

您的数组已经包含一个 DOM 元素列表，并且您已经将其随机选择到变量 randomitem 中。

通过$('.'+ randomitem ) 重新选择它们将不起作用，因为randomitem 是一个DOM 元素，而不是一个字符串。

.something 选择器将选择类为 something 的元素。

在您的情况下，您可能希望通过以下方式选择项目：

//Pass DOM element directly into JQuery to get a JQuery object with the appropriate element selected
var $randomitem = $(list[randomnum]);

//Set css to whatever you want.
$randomitem.css('bottom', '-170px');

//Subsequent css updates

最后，您的动画不会像您预期的那样工作，因为更改元素的 css 之间没有延迟。您会看到 css 更新到最后一个值，并且中间没有值。

理想情况下，您希望在连续的 css 更新之间添加延迟，以便查看每个单独的步骤。