javascript - 页面加载时类之间的随机切换

Question

我将我的网站分为 50/50%，每个部分都有自己的外观和信息。我有一个 css 类，可以使两侧向左或向右浮动取决于它的设置。我想要一个小脚本 在页面加载时在类之间随机切换并向左或向右切换。

现在的 CSS 类:

.left-wrapper,
.right-wrapper {
  position: relative;
  float: left;
  width: 50%;
}

我在考虑在两个类之间切换:

.left-wrapper-1,
.right-wrapper-1 {
  position: relative;
  float: left;
  width: 50%;
}


.left-wrapper-2,
.right-wrapper-2 {
  position: relative;
  float: right;
  width: 50%;
}

Javascript 不工作:

window.onload = function() {
     $('.left-wrapper-1').toggleClass('left-wrapper-2');
     $('.right-wrapper-1').toggleClass('right-wrapper-2');
};

Answer 1

这是@KennyFellows 回答的纯 JavaScript 版本:

https://jsfiddle.net/ryanpcmcquen/LwqL1ep1/

window.addEventListener('load', function() {
  // This is a ternary operator, which is just a shorthand way to 
  // do an if/else statement. This basically says, if the random number
  // is less than .5, assign "1" to the scenario variable.
  // if it is greater (or equal to), assign "2" to the variable. 
  var scenario = Math.random() < .5 ? "1" : "2";

  document.querySelector(".left-wrapper").classList.add("left-wrapper-" + scenario);
  document.querySelector(".right-wrapper").classList.add("right-wrapper-" + scenario);

});

.left-wrapper-1,
.right-wrapper-1 {
  position: relative;
  float: left;
  width: 50%;
}
.left-wrapper-2,
.right-wrapper-2 {
  position: relative;
  float: right;
  width: 50%;
}

<div class="left-wrapper">1</div>
<div class="right-wrapper">2</div>