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

Question

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

CSS class 现在：

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

我想在两个 class 之间切换：

.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 class 的元素中删除 class left-wrapper-1 并添加 left-wrapper-2 。

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

$.toggleClass ：将删除 (...) 中存在的 class 并添加那些不存在的 !

希望对您有所帮助。

编辑：评论和澄清后，

$('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 不会进行随机切换。它只会找到 class 为 .left-wrapper-1 的元素，并添加一个 class 为 .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>

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

Random toggle between classes on page load

html

javascript

css

onload

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

Random toggle between classes on page load

html

javascript

css

onload

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