javascript - 在显示 div 时更改背景颜色

Question

我有三个 div 一个接一个地显示/隐藏。我想要的是当一个特定的 div 显示时，页面的背景颜色会发生变化。此外，由于 transition-duration，更改变得很顺利。

您可能猜到了，gradient-low 颜色会与 low div 同时显示，其他颜色也一样。我遇到的一个困难是不同的 div 每次都不会以相同的顺序显示(即 low div 后面可能是 high div，然后是 适中等。它是随机的。)

$(document).ready(function() {
  $("#low").on(function() {
    $("#low").css("gradient-low");
    $("#moderate").hide();
    $("high").hide();
  });
});

.gradient-low {
  background: #ddd6f3;
  background: -webkit-linear-gradient(to left, #faaca8, #ddd6f3);
  background: linear-gradient(to left, #faaca8, #ddd6f3);
  transition-duration: 0.4s;
}

.gradient-moderate {
  background: #ff6e7f;
  background: -webkit-linear-gradient(to left, #ff6e7f, #bfe9ff);
  background: linear-gradient(to left, #ff6e7f, #bfe9ff);
  transition-duration: 0.4s;
}

.gradient-high {
  background: #EECDA3;
  background: -webkit-linear-gradient(to left, #EF629F, #EECDA3);
  background: linear-gradient(to left, #EF629F, #EECDA3);
  transition-duration: 0.4s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="low">
  <h3 class="level">Low</h3>
</div>
<div id="moderate" style="display: none;">
  <h3 class="level">Moderate</h3>
</div>
<div id="high" style="display: none;">
  <h3 class="level">High</h3>
</div>

我是 jQuery/javascript 的初学者，您可能会猜到我遇到了一些困难。如果您对此过程有任何帮助，我们将不胜感激。

Answer 1

你需要这样的东西

function showLow() {
  $('body').addClass('gradient-low').removeClass('gradient-moderate').removeClass('gradient-high');
  $('#moderate, #high').hide();
  $('#low').show();
}