使用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 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 2

在申請課程時添加條件

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

更改百分比以確定獲得徽章的產品數量（統計數據......）

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>