0

基本上，我的网站上有一个页面，其中包含可以滑动以显示背景颜色的框。我希望这个背景颜色在页面加载时是随机的，通过向元素添加一个类，例如 .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>


4

2 回答 2

3

您的 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]);
});
于 2010-10-29T01:10:25.067 回答
0

上面的答案可能会导致重复我认为这可以解决它:)

$(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;}
});
于 2010-10-29T02:08:06.210 回答