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

당신은 이미 논리를 얻었으므로 클래스를 추가하기 만하면됩니다. 이 시도 :

.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에 :

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

당신이 다음 할 필요가 설정이 당신의 CSS의 클래스 , 이미지 2, 요법)

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

Answer 3

로리는 좋은 솔루션을 가지고 있지만, 당신이 그렇게 궁금하면 여기에 좀 더 일반적인 뭔가 :.

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

클래스 문자열을 배열에 전달하고 원하는 클래스가있는 요소를 전달하면됩니다.