Question

我在<li>中使用jQuery添加了一些<div>：

countBlocs = 60;
for (i = 1; i <= countBlocs; i++)
{
    $('#head #lol').append("<li id='losange"+ i++ +"' class='losange'></li>");
};

在html中看起来像这样：

<section id='head'>
    <article id='head_content'>
        <li id='losange1' class='losange'></li>
        <li id='losange2' class='losange'></li>
        <li id='losange3' class='losange'></li>
        <li id='losange4' class='losange'></li>
        <li id='losange5' class='losange'></li>
        <li id='losange6' class='losange'></li>
        ...
    </article>
</section>

现在我正在尝试在jQuery中为每个<li>添加随机类：

countBlocs = 60;
for (i = 1; i <= countBlocs; i++)
{
    var paras = $('#head #head_content li');
    var rand = Math.floor(Math.random() * paras.length);
    paras.eq(rand).addClass('logo_white');
};

这项工作做得很好，但我需要添加1个以上的课程，但每个<li>只保留1个课程

所以我将上面的代码（不是很好）用不同的类名进行了重复：

countBlocs = 30;
for (i = 1; i <= countBlocs; i++)
{
    var paras = $('#head #head_content li');
    var rand = Math.floor(Math.random() * paras.length);
    paras.eq(rand).addClass('logo_white'); 
};
countBlocs = 30;
for (i = 1; i <= countBlocs; i++)
{
    var paras = $('#head #head_content li');
    var rand = Math.floor(Math.random() * paras.length);
    paras.eq(rand).addClass('logo_red'); <- Another class name
};

...

现在我生成的<li>看起来像这样：

<section id='head'>
    <article id='head_content'>
        <li id='losange1' class='losange logo_red'></li>  <- Ok!
        <li id='losange2' class='losange logo_red'></li> <- Ok!
        <li id='losange3' class='losange logo white logo red'></li> <- WRONG!
        <li id='losange4' class='losange logo white'></li> <- Ok!
        <li id='losange5' class='losange logo red logo white'></li> <- WRONG!
        <li id='losange6' class='losange logo red'></li> <- Ok!
        ...
    </article>
</section>

问题：

它在同一个<li>上添加了多个类，我只希望从已经定义的几个类中随机添加一个类到我的<li>

Answer 1

将所有课程放在一个数组中，然后在数组上使用随机数来获取您的课程并将其添加到您的课程中。

var classes = ['white', 'red', 'logo_white'];
$('#head #head_content li').each(function() {
  var random = Math.floor(Math.random() * classes.length);
  $(this).addClass(classes[random]);
}

Answer 2

将项目循环一次，然后为每个项目添加一个随机类：

var colors = ["logo_red", "logo_white"];

for (i = 1; i <= countBlocs; i++)
{
    var liItem = $('#losange' + i);
    var rand = Math.floor(Math.random() * colors.length);
    liItem.addClass(colors[rand]);
};

Answer 3

你想做这样的事情：

 $('#head #head_content li').each(function(n) {
        $(this).addClass(myrandomFunction());
  });

并拆分出一个单独的'myrandomFunction'，它将返回随机类，每次调用一次。

随机将类添加到生成的<li>一次</li>

3 个答案: