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/

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

4 个答案: