2012-11-06 57 views
2

在我的遊戲中,當它完成時,隨機圖像被傳遞給「揭示包裝器」以顯示在最後。在div中添加隨機類

我仍想這樣做,但不是這樣做,我想每次向「revael-wrapper」添加一個隨機類,使其成爲「.reveal-wrapper .image1」。將有5個不同的圖像,我希望它每次隨機選擇一個。

目前它的代碼如下:

$(document).ready(function() { 
    bgImageTotal = 5; 
    randomNumber = Math.round(Math.random() * (bgImageTotal - 1)) + 1; 
    imgPath = ('images/reward-images/' + randomNumber + '.png'); 
    $('.reveal-wrapper').css('background-image', ('url("' + imgPath + '")')); 
}); 

任何想法如何我會添加一個隨機的類呢?

回答

4

你已經掌握了邏輯,你只需要添加類。試試這個:

.image1 { background-image: url('images/reward-images/1.png'); } 
.image2 { background-image: url('images/reward-images/2.png'); } 
.image3 { background-image: url('images/reward-images/3.png'); } 
.image4 { background-image: url('images/reward-images/4.png'); } 
.image5 { background-image: url('images/reward-images/5.png'); } 
0

既然你已經擁有的隨機數,並提供你的圖像具有相同的文件名結構(圖像1:

$(document).ready(function() { 
    bgImageTotal = 5; 
    randomNumber = Math.round(Math.random() * (bgImageTotal - 1)) + 1; 
    $('.reveal-wrapper').addClass('image' + randomNumber); 
}); 

所有,那麼你需要做的是建立在你的CSS類,圖像2,ECT)

$('.reveal-wrapper').addClass('image' + randomNumber); 
0

羅裏有一個精緻的解決方案,但如果你很好奇這裏的東西多一點一般:

function add_rand_class (classes, elem) { 
    $(elem).addClass(classes[Math.random() * classes.length >> 0]); 
} 

傳遞函數一個類的字符串數組和你想要的類的元素,你很好去。