我怎么能随机地在 jquery 中大量更改 div?
How could I en mass change divs in jquery randomly?
这是一个 jsfiddle:
基本上我有一个 div 会闪烁,因为当生成随机数时,不透明度设置为 < 0.5 然后 -> 0,否则 = 1.0。
我如何使用以下内容:
var opacity = 0;
var myVar = setInterval(function () {
opacity = Math.random();
if (opacity > 0.5) {
opacity = 1;
} else {
opacity = 0;
}
$('.point1').css('opacity', opacity);
}, 50);
但是在一百个 div 中,每个都是一个完全不同的随机值(这意味着它们不是由相同的二进制不透明度绑定在一起的)。
谢谢!
您可以使用 jQuery's each()
method 遍历每个 .point1
元素,然后将 opacity
单独应用于每个元素:
$('.point').each(function() {
$(this).css({ opacity: Math.random() > 0.5 ? 1 : 0 });
});
代码片段
$('.point').each(function() {
$(this).css({ opacity: Math.random() > 0.5 ? 1 : 0 });
});
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300|Roboto:400,300,100,500|Dancing+Script:400,700);
.point {
width: 10px;
height: 10px;
background-color: Black;
border-radius: 5px;
margin: 0px;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
您可以使用 .each() 遍历一组元素,例如
$('.point').each(function() {
var $this = $(this);
var myVar = setInterval(function() {
$this.css('opacity', Math.round(Math.random()));
}, 50);
})
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400, 300|Roboto:400, 300, 100, 500|Dancing+Script:400, 700);
.point {
width: 10px;
height: 10px;
background-color: Black;
border-radius: 5px;
margin: 0px;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
这是一个 jsfiddle:
基本上我有一个 div 会闪烁,因为当生成随机数时,不透明度设置为 < 0.5 然后 -> 0,否则 = 1.0。 我如何使用以下内容:
var opacity = 0;
var myVar = setInterval(function () {
opacity = Math.random();
if (opacity > 0.5) {
opacity = 1;
} else {
opacity = 0;
}
$('.point1').css('opacity', opacity);
}, 50);
但是在一百个 div 中,每个都是一个完全不同的随机值(这意味着它们不是由相同的二进制不透明度绑定在一起的)。
谢谢!
您可以使用 jQuery's each()
method 遍历每个 .point1
元素,然后将 opacity
单独应用于每个元素:
$('.point').each(function() {
$(this).css({ opacity: Math.random() > 0.5 ? 1 : 0 });
});
代码片段
$('.point').each(function() {
$(this).css({ opacity: Math.random() > 0.5 ? 1 : 0 });
});
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300|Roboto:400,300,100,500|Dancing+Script:400,700);
.point {
width: 10px;
height: 10px;
background-color: Black;
border-radius: 5px;
margin: 0px;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
您可以使用 .each() 遍历一组元素,例如
$('.point').each(function() {
var $this = $(this);
var myVar = setInterval(function() {
$this.css('opacity', Math.round(Math.random()));
}, 50);
})
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400, 300|Roboto:400, 300, 100, 500|Dancing+Script:400, 700);
.point {
width: 10px;
height: 10px;
background-color: Black;
border-radius: 5px;
margin: 0px;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>