0

我<li>在<div>jQuery 中添加了一些，如下所示：

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>

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

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 个类，但每个类只保留 1 个类<li>

所以我用不同的类名复制了上面的代码（这不是很好）：

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>从已经定义的几个类中随机添加一个类

4

3 回答 3

1

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

var classes = ['white', 'red', 'logo_white'];
$('#head #head_content li').each(function() {
  var random = Math.floor(Math.random() * classes.length);
  $(this).addClass(classes[random]);
}
于 2012-11-22T11:05:19.723 回答
1

遍历项目一次，然后为每个项目添加一个随机类：

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]);
};
于 2012-11-22T11:08:38.557 回答
0

你想做这样的事情：

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

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

于 2012-11-22T11:10:09.407 回答