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

您可以逐个随机选择课程，并在每次迭代中应用并删除使用过的课程：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

您可能希望使用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>

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

3 个答案: