javascript - 如何在点击时将此功能更改为随机？目前在 4 个选项中坚持相同的颜色类别

Question

通过选择 4 个随机颜色类之一，努力让脚本“点击”工作。

当前随机选择一个，但不会在单独单击 时刷新#myNav。

我也尝试过使用toggleClass，但是我认为这是由于我对 js 很陌生，因此编码不佳。

$(document).ready(function(){
var colors = ['black','blue','mistyrose','white'];
var new_color = colors[Math.floor(Math.random()*colors.length)];
$('#myNav').addClass(new_color);
});

标签： javascriptarrayscolors

Answer 1

尝试

myNav.classList.toggle(new_color);

function changeColor() {
  var colors = ['black', 'blue', 'mistyrose', 'white'];
  var new_color = colors[Math.floor(Math.random() * colors.length)];
  myNav.classList.toggle(new_color);
}

.box { width: 100px; height: 100px; border: 1px solid black; cursor: pointer; }

.black { background: black; }
.blue { background: blue; }
.mistyrose { background: mistyrose; }
.white { background: white; }

<div id="myNav" class="box" onclick="changeColor()"></div>