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（）比較関数は実際には機能しません。そもそも、このような関数は、比較の最初の項が2番目の項よりも大きいか、小さいか、または等しいかどうかに応じて、1、-1、または0を返す必要があります。

次に、そこにあるコードは明らかに6要素の配列を参照することを目的としていますが、記述されているように、配列の最後のインデックスより2高い7までの値を返すことができます。次のように、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 に答える