Question

基本上我的网站上有一个页面，其中的框可以滑动以显示背景颜色。我希望这个背景颜色在页面加载时随机添加一个类，例如.blue，.green等......

我已创建此代码，您可能会注意到这会随机对颜色类进行排序并应用于元素，这适用于前6个元素，但是此页面特别有12个元素我希望它适用于此，所以我的问题我如何将变量类的随机选择应用于所有“.portfolio ul li a”？是否需要某种形式的重复？

这是我的剧本..

function randCol() {
return (Math.round(Math.random())*7); }

$(document).ready(function() {
var classes = [ 'blue', 'orange', 'green', 'pink', 'black', 'white'];
classes.sort( randCol );
$('.portfolio ul li a').each(function(i, val) {
    $(this).addClass(classes[i]);
});

}）

这是我的源代码结构

<div class="portfolio">
<ul>
    <li>
       <a href="#">
         <img src="images/content/portfolio/sample1.png" height="175" width="294" alt="sample" class="front" />
         Text for behind the image                         
       </a>
    </li>

Answer 1

你的randCol（）比较函数不起作用。首先，这样的函数应该返回1，-1或0，这取决于比较的第一项是否大于，小于或等于（分别）第二项。

其次，你在那里的代码显然是为了引用你的6元素数组，但是如你所写，它可以返回高达7的值，这比数组的最后一个索引高2。最好在each（）函数文字中进行随机化，如下所示：

$(document).ready(function() {
var classes = [ 'blue', 'orange', 'green', 'pink', 'black', 'white'];

$('.portfolio ul li a').each(function(i, val) {
    var index = Math.floor(Math.random()*6); // highest value will be 5, lowest will be 0
    $(this).addClass(classes[index]);
});

Answer 2

上述答案可能会导致重复颜色，我认为这可以解决它:)

$(document).ready(function() {
var classes = [ 'blue', 'orange', 'green', 'pink', 'black', 'white'];
var temp=0;
$('.portfolio ul li a').each(function(i, val) {
    if(temp==0){
    var index = Math.floor(Math.random()*6);}
    else{ 
    var index = Math.floor(Math.random()*6);
    index=temp+index;
    temp=index;}
});

如何使JavaScript Math.random重复？

2 个答案: