用javascript/jquery将随机css类添加到随机元素

Question

我有75个div与多个产品，我需要随机产品显示随机徽章。

这是HTML，其中显示徽章：

<div class="badge"> </div> 

这是我的脚本是添加随机类所有元素与一流的徽章，我想随机类添加到随机产品。

var classes = ['lastBadge', 'offerBadge', 'stockBadge']; 
var prevClass = ""; 
$('.badge').each(function() { 
var classes2 = []; 
for (var i = 0; i < classes.length; i++) { 
    if (classes[i] !== prevClass) { 
     classes2.push(classes[i]); 
    } 
} 
$(this).addClass(prevClass =classes2[Math.floor(Math.random()*classes2.length)]); 
console.log(prevClass); 
}); 

Answer 1

应用类时

var percentage = 50; 
if(Math.random() > percentage/100) 
    $(this).addClass(prevClass =classes2[Math.floor(Math.random()*classes2.length)]); 

变动百分比来决定多少产品获得徽章添加的条件（统计...）

Answer 2

你可以随意把你的类一个接一个，并在每次迭代应用和移走的一种：

var classes = ['A', 'B', 'C', 'D', 'E']; 
 

 
$(".badge").each(function() { 
 
    if (classes.length === 0) return false; // break jQuery each 
 

 
    var index = Math.floor(Math.random() * classes.length); 
 
    var className = classes[index]; 
 
    
 
    console.log(className); 
 
    $(this).addClass(className); 
 
    classes.splice(index, 1); 
 
});

.badge.A { 
 
    background-color: #777; 
 
} 
 

 
.badge.B { 
 
    background-color: #888; 
 
} 
 

 
.badge.C { 
 
    background-color: #999; 
 
} 
 

 
.badge.D { 
 
    background-color: #AAA; 
 
} 
 

 
.badge.E { 
 
    background-color: #BBB; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="badge">1</div> 
 
<div class="badge">2</div> 
 
<div class="badge">3</div> 
 
<div class="badge">4</div> 
 
<div class="badge">5</div> 
 
<div class="badge">6</div> 
 
<div class="badge">7</div> 
 
<div class="badge">8</div>

您可能想克隆使用Array.from您的阵列或[].slice.call以便在申请后不会丢失您的班级列表。

Answer 3

你可以做到以下几点：

var classes = ['lastBadge', 'offerBadge', 'stockBadge']; 
 

 
var randomBadges = function() { 
 
    var divCount = 75; 
 
    var randomDivCount = Math.floor(Math.random() * divCount); 
 
    var randomEl, randomClass; 
 

 
    do { 
 
    randomEl = Math.floor(Math.random() * divCount); 
 
    randomClass = classes[Math.floor(Math.random() * 3)]; 
 
    $('.badge').eq(randomEl).addClass(randomClass); 
 
    randomDivCount--; 
 
    } while (randomDivCount >= 0); 
 
} 
 

 
randomBadges();

.badge { 
 
    background: gray; 
 
    display: inline-block; 
 
    height: 10px; 
 
    width: 10px; 
 
} 
 
.lastBadge { 
 
    background: red; 
 
} 
 
.offerBadge { 
 
    background: green; 
 
} 
 
.stockBadge { 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div> 
 
<div class="badge"></div>