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

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

我理解你的问题，就这样试试吧：

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

它将从具有 left-wrapper-1 类的元素中删除类 left-wrapper-1 并添加 left-wrapper-2 。

第二个相同：
它将从具有 right-wrapper-1 类的元素中删除类 right-wrapper-1 并添加 right-wrapper-2 。

$.toggleClass ：将删除(...) 中存在的类并添加不存在的类！

希望对你有帮助。

---

编辑：在 cmets 和澄清之后，

$('button').click(function() {
  // the random part is here
  var id = Math.floor( Math.random() * 2 ) + 1;
  // just for debug
  $('#dbg').append('<div>' + id + '</div>');


     $('.left-wrapper').toggleClass('left-wrapper-' + id);
     $('.right-wrapper').toggleClass('right-wrapper-' + id);

});

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

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


.left-wrapper-2,
.right-wrapper-2 {
  position: relative;
  float: right;
  width: 50%;
  background : black;
  color : #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='left-wrapper'>A</div>
<div class='right-wrapper'>B</div>
<button>click me</button>
<div id='dbg'></div>

Answer 2

你那里的当前 JS 不会做随机切换。它只会找到类为 .left-wrapper-1 的元素，并添加一个类为 .left-wrapper-2。

你需要更多这样的东西：

$(document).ready(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"; 

    $(".left-wrapper").addClass("left-wrapper-" + scenario); 
    $(".right-wrapper").addClass("right-wrapper-" + scenario); 

}); 

Answer 3

你是这个意思吗？

// set a variable and give it a random boolean value
var myRandom = !Math.floor( Math.random() * 2 );

// if true (or false), toggle classes
$(document).ready(function(){
    if (myRandom) {
        $('.left-wrapper-1').toggleClass('left-wrapper-1 left-wrapper-2');
        $('.right-wrapper-1').toggleClass('right-wrapper-1 right-wrapper-2');
    };
});

Answer 4

这是@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>