Question

我有两个div，我想添加这个类＆＃34; .active＆＃34;其中只有一个是随机的。

这是我能想到的最好的，但是，有时两个div都会添加这个类。

randomClass: function(){
        var classes = ["active", ""];
         $(".contain > div").each(function(){
           $(this).addClass(classes[~~(Math.random()*classes.length)]);
        });
    },

HTML

 <div class="contain">
    <div></div>
    <div></div>
 </div>

Answer 1

我编写了以下代码来使用eq。它将在有效索引之间选择一个随机数，然后返回该值，然后附加适当的类。我添加了一行来删除当前该类处于活动状态的那一行，因此该按钮可以正常工作。

您的代码存在重要的逻辑错误：使用.each，您不，保证不选择这两个或不选择。你必须事先选择对象。

使用您的代码，这里有可能的结果（其中1表示活动，0表示未激活）：

50％您的代码无法按预期工作。

所以，我写的有点不同。

function randomClass(){
	$(".contain > div").removeClass("active");
	$(".contain > div").eq(Math.floor(Math.random()*$(".contain > div").length)).addClass("active");
}


randomClass();

.active {
	background-color:red;
}
.box {
	width:50px;
	height:50px;
	border:1px solid black;
	margin:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contain">
	<div class="box"></div>
	<div class="box"></div>
</div>

<button onclick="randomClass()">New Random</button>

Answer 2

基于代码的最简单方法：

randomClass: function(){
        var classes = ["active", ""];
         $(".contain > div").each(function(){
            var random = Math.random();
            var classesLength = classes.length;
            var index = ~~(random*classesLength);
            index = index <= classesLength - 1 ? index : index -1;
            $(this).addClass(classes.splice(index, 1)[0]);
        });
    },

您可以添加不同数量的班级列表，如果它在数组classes

中是唯一的，则永远不会重复

Answer 3

以下是您问题的一个简单解决方案：

＆＃13;

// from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#Getting_a_random_integer_between_two_values_inclusive
function getRandomIntInclusive(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function randomClass() {
  var className = 'active';
  var elements = $('.contain > div');
  elements.removeClass(className);
  var index = getRandomIntInclusive(0, elements.length - 1);
  elements.eq(index).addClass(className);
}

randomClass();

＆＃13;

.contain div {
  border: 1px solid;
  width: 20px;
  height: 20px;
  margin: 10px;
}

.active {
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contain">
    <div></div>
    <div></div>
 </div>

＆＃13;

将类随机添加到两个div中的一个

3 个答案: