向div添加隨機類

Question

目前，在游戲完成時，隨機圖像將傳遞到“ reveal-wrapper”以顯示在最后。

我仍然想這樣做，但是我不想每次都這樣向“ 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 + '")'));
});

有什么想法我將添加一個隨機類嗎？

Answer 1

您已經掌握了邏輯，只需要添加類即可。 嘗試這個：

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

您需要做的就是在CSS中設置類：

.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'); }

Answer 2

由於您已經具有隨機數，並且提供的圖像具有相同的文件名結構（image1，image2等），

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

Answer 3

羅里（Rory）有一個很好的解決方案，但是如果您好奇的話，這里有一些更一般的說明：

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

向函數傳遞一個類字符串數組和您要在其上創建類的元素，您就可以了。