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

【问题标题】：Add random css classes to random elements with javascript/jquery使用 javascript/jquery 将随机 css 类添加到随机元素
【发布时间】：2016-02-17 07:14:53
【问题描述】：

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

【问题讨论】：

标签： javascript jquery css random

【解决方案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 克隆您的阵列，以免在申请后丢失您的课程列表。

【讨论】：

将脚本移至加载 div 后，或使用“就绪”状态，因为函数运行时未加载 div，并且在 SO 上的预览中没有任何效果:)
@Narxx 它对我有用...Stackoverflow 总是将脚本放在 sn-ps HTML 之后。
你是对的。我在没有注意到的情况下阻止了 jQuery。为您的解决方案获得 +1。
感谢您的回答，但如果我有 10 个 div，则只有前 5 个 div 会添加随机类。怎么可能只有一些 div 会有一个随机的 css 而一些没有。就像来自 30 个 div ..只有 15 个 div 有一个来自 css 数组的随机 css。jsfiddle.net/wdau9ust
只要给那些你想要随机类的 div 类。在此示例中，类是徽章。你可以设置一个不同的类来循环。

【解决方案2】：

应用类时添加条件

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

更改百分比以决定有多少产品获得徽章（统计上...）

【讨论】：

【解决方案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>

【讨论】：