从3个变量中随机添加20个div元素

Question

我有大约20个div，并有3个悬停效果类。想要将这3个悬停效果随机添加到所有div。

我的JS是：

<script> 
$(document).ready(function() { 
viewclasses = 3; 
randomNumber = Math.round(Math.random() * (viewclasses - 1)) + 1; 
$('.basediv').each(function(i, val) { 
    $(this).addClass('view' + randomNumber); 
}); 
}); 
</script> 

我有20周的div类.basediv与此代码分配给他们

和CSS类即 .view1 .view2 .view3

我得到所有具有相同效果的div元素。每个div元素都有.view1或.view2或.view3效果。

请指引我

Answer 1

只是把随机数的循环像这里面：

<script> 
$(document).ready(function() { 
viewclasses = 3; 
$('.basediv').each(function(i, val) { 
    randomNumber = Math.round(Math.random() * (viewclasses - 1)) + 1; 
    $(this).addClass('view' + randomNumber); 
}); 
}); 
</script> 

Answer 2

我想你想的randomNumber移动到each功能：

$('.basediv').each(function(i, val) { 
    randomNumber = Math.round(Math.random() * (viewclasses - 1)) + 1; 
    $(this).addClass('view' + randomNumber); 
}); 

Answer 3

尝试类似这样的

$('.basediv').each(function(i, val) { 
    randomNumber = Math.round(Math.random() * (viewclasses - 1)) + 1; 
    $(this).addClass('view' + randomNumber); 
}); 

$(document).ready(function() { 
 
viewclasses = 3; 
 
$('.basediv').each(function(i, val) { 
 
    randomNumber = Math.round(Math.random() * (viewclasses - 1)) + 1; 
 
    $(this).addClass('view' + randomNumber); 
 
}); 
 
});

.basediv{ 
 
    width:100px; 
 
    height:100px; 
 
} 
 
.view1{ 
 
    background:orange; 
 
} 
 
.view2{ 
 
    background:green; 
 
} 
 
.view3{ 
 
    background:blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 

 
<div class="basediv"></div> 
 
<div class="basediv"></div> 
 
<div class="basediv"></div> 
 
<div class="basediv"></div> 
 

 
<div class="basediv"></div> 
 
<div class="basediv"></div> 
 
<div class="basediv"></div> 
 
<div class="basediv"></div> 
 

 
<div class="basediv"></div> 
 
<div class="basediv"></div> 
 
<div class="basediv"></div> 
 
<div class="basediv"></div> 
 
<div class="basediv"></div> 
 
<div class="basediv"></div> 
 
<div class="basediv"></div> 
 
<div class="basediv"></div> 
 
<div class="basediv"></div> 
 
<div class="basediv"></div> 
 
<div class="basediv"></div> 
 
<div class="basediv"></div> 
 
<div class="basediv"></div> 
 
<div class="basediv"></div> 
 
<div class="basediv"></div> 
 
<div class="basediv"></div>