在单击- Javascript/jQuery上将背景更改为随机颜色

Question

每次点击导航条链接时，我都会尝试将身体的背景色更改为随机颜色。

我得到它是为了在第一次点击链接时改变一个随机的颜色--但是当一个不同的链接被点击时，没有什么改变。

有小费吗？

HTML：

    <div class="nav">
      <ul id="show">
        <li id="link1"><a href="#portfolio">Portfolio</li></a>
        <li id="link2"><a href="#about">About</li></a>
        <li id="link3"><a href="#email">Contact</li></a>
        <hr/>
      </ul>
    </div>

联署材料：

$(function() {

     var colors = ['red', 'blue', 'green', 'grey'];

     var randColor = colors[Math.floor(Math.random()*colors.length)];

     $('.nav a').click(function() {
         $('body').css('background-color', randColor);
     });
});

Answer 1

因为您只生成一个随机数并继续使用它，所以将其移动到click方法中。

Answer 2

在每次单击时，您需要找到一个新的随机颜色，在您的示例中，randColor变量只更新一次，在单击句柄中，始终使用相同的值。

​

$(function() {

  var colors = ['red', 'blue', 'green', 'grey'],
    color;

  $('.nav a').click(function() {
    var randColor;
    do {
      randColor = colors[Math.floor(Math.random() * colors.length)];
    } while (color == randColor);
    $('body').css('background-color', randColor);
    color = randColor;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="nav">
  <ul id="show">
    <li id="link1"><a href="#portfolio">Portfolio</a></li>
    <li id="link2"><a href="#about">About</a></li>
    <li id="link3"><a href="#email">Contact</a></li>
  </ul>
  <hr/>
</div>

​