[英]How can I randomize the value of CSS attributes using jquery?
I'm trying to use jquery to make a css selector randomize one of its values on an html element. 我正在尝试使用jquery使css选择器随机化其在html元素上的值之一。 I've gotten as far as randomizing the selector for all of the elements (cycling through colors on a list border-left), however I want to randomize each individual list element at the same time.
我已经对所有元素的选择器进行了随机化(在列表左边框的颜色之间循环),但是我想同时对每个单独的列表元素进行随机化。
Apologies if that's confusing (I'm confused by it myself), but you'll understand if you run the below code a few times and watch the border color change. 抱歉,这很令人困惑(我自己对此感到困惑),但是如果您多次运行以下代码并注意边框颜色的变化,您将理解。 Ideally, those border colors would all be different.
理想情况下,这些边框颜色将全部不同。
Thanks very much for any help. 非常感谢您的帮助。
<html>
<head>
<title>Title</title>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<style>
.bars{
border-left-style: solid;
border-left-width: 4px;
padding-left: 10px;
}
ul{
list-style-type: none;
}
</style>
</head>
<body>
<ul>
<li class="bars">
<a>Marathon Men and Women</a>
</li>
<li class="bars">
<a>Marathon Men and Women</a>
</li>
<li class="bars">
<a>Marathon Men and Women</a>
</li>
<li class="bars">
<a>Marathon Men and Women</a>
</li>
<li class="bars">
<a>Marathon Men and Women</a>
</li>
</ul>
</body>
<script>
$(document).ready(function(){
var colors = ["#CCCCCC","#333333","#990099"];
var rand = Math.floor(Math.random()*colors.length);
$('.bars').css("border-left-color", colors[rand]);
});
</script>
You can use jQuery.each() function to specify individual colors: http://jsfiddle.net/qaF24/ 您可以使用jQuery.each()函数指定单独的颜色: http : //jsfiddle.net/qaF24/
$(document).ready(function(){
var colors = ["#CCCCCC","#333333","#990099"];
$('.bars').each(function() {
var rand = Math.floor(Math.random()*colors.length);
$(this).css("border-left-color", colors[rand]);
});
});
http://jsfiddle.net/RMR42/1/ http://jsfiddle.net/RMR42/1/
var colors = ["#CCCCCC", "#333333", "#990099"];
var bars = document.getElementsByClassName('bars');
for (var i = 0; i < bars.length; i++) {
bars[i].style.borderLeftColor = colors[Math.floor(Math.random() * colors.length)];
}
Maybe a vanilla solution will help somebody. 也许有效的解决方案将对某人有所帮助。 Faster, without more code.
更快,无需更多代码。
The jQuery selector ('.bars') is selecting all elements of the class 'bar'. jQuery选择器(.bars)选择类“ bar”的所有元素。 Of course it's going to set them all the same.
当然,将它们设置为相同。
I would recommend instead assign an id to the parent element and then use the .children()
selector to iterate through each <li>
and assign a color. 我建议改为为父元素分配一个id,然后使用
.children()
选择器遍历每个<li>
并分配颜色。
something like 就像是
<ul id="bars">
<li>
<a>Marathon Men and Women</a>
</li>
<li>
<a>Marathon Men and Women</a>
</li>
<li>
<a>Marathon Men and Women</a>
</li>
<li>
<a>Marathon Men and Women</a>
</li>
<li>
<a>Marathon Men and Women</a>
</li>
</ul>
<script>
$(document).ready(function(){
var colors = ["#CCCCCC","#333333","#990099"],rand;
var ligroup = $('#bars').children();
for (var i=0,len=ligroup.length;i<len;i++) {
rand = Math.floor(Math.random()*colors.length);
$(ligroup[i]).css("border-left-color", colors[rand]);
}
});
</script>
$(document).ready(function () {
var bars = document.getElementsByClassName('bars');
for (var i = 0; i < bars.length; i++) {
bars[i].style.borderLeftColor ="#"+genColor();
}
});
Random color generator for each Li : http://jsfiddle.net/RMR42/2/ 每个Li的随机颜色生成器: http : //jsfiddle.net/RMR42/2/
you have to use some sort of looping through all the similar class elements if you want each individual to be different and random. 如果您希望每个人都是不同且随机的,则必须在所有相似的类元素中使用某种循环。
reference: https://gist.github.com/wfreeman/1158409 参考: https : //gist.github.com/wfreeman/1158409
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.