从3个变量中随机添加20个div元素
问题描述:
我有大约20个div,并有3个悬停效果类。想要将这3个悬停效果随机添加到所有div。从3个变量中随机添加20个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效果。
请指引我
答
只是把随机数的循环像这里面:
<script>
$(document).ready(function() {
viewclasses = 3;
$('.basediv').each(function(i, val) {
randomNumber = Math.round(Math.random() * (viewclasses - 1)) + 1;
$(this).addClass('view' + randomNumber);
});
});
</script>
答
我想你想的randomNumber
移动到each
功能:
$('.basediv').each(function(i, val) {
randomNumber = Math.round(Math.random() * (viewclasses - 1)) + 1;
$(this).addClass('view' + randomNumber);
});
答
尝试类似这样的
$('.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>