頁面加載類別之間的隨機切換

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>

Answer 2

就像我明白你的問題，只是嘗試這樣的：

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：將刪除(...)中的類並添加那些不存在！

我希望這會幫助你。

---

編輯：後評論和澄清，

$('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 3

您在當前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 4

你的意思是這樣的：

你會需要更多的東西一樣嗎？

// 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'); 
    }; 
});