每当用户添加 <li> 时，jquery 从数组中选择特定颜色

【问题标题】：Whenever user adds a <li>, jquery chooses a specific colour from an array每当用户添加 <li> 时，jquery 从数组中选择特定颜色
【发布时间】：2025-12-05 03:20:10
【问题描述】：

我是 javascript 新手，所以要简单。

我只想让用户能够写<li> </li>，jquery 将根据列表顺序选择颜色。目前，用户必须输入class="b" 或class="c"。

我是否正确地假设我会创建一个颜色数组并使用某种循环？

我希望实现的视觉示例：http://popmeup.org/about

【问题讨论】：

你是在正确的方式:) 不要循环整个数组，只需选择随机颜色。
您能详细说明一下吗？ :)
当然，但只在午餐后 :)
您还需要解决方案还是对@Simon 的回答感到满意？
他的回答很完美，但还是谢谢！

标签： javascript jquery css arrays colors

【解决方案1】：

您可以使用 CSS :nth-child 选择器来指定颜色的顺序：

li:nth-child(2n - 1) {
    color: red;
}

li:nth-child(2n) {
    color: blue;
}

上面的基本示例会将<li> 元素交替着色为红色和蓝色，从红色开始。看看this jsFiddle demo。

【讨论】：

听起来不错。如果列表是无限的，有没有办法让颜色在 50 个列表项之后重新开始？
li:nth-child(n+50) 会这样做。您可以查看更多示例：css-tricks.com/useful-nth-child-recipies
但这不会使所有超过 50 的列表项都只使用一种颜色吗？而不是重新开始订单。
@TomJulianHume 可能会有，您只需将索引传递给:nth-child 正确设置即可。不过，这不是我有很多经验的事情。

【解决方案2】：

类似this fiddle?

var colors = [ 'BlueViolet', 'CadetBlue', 'Coral', 'Crimson', 'DarkGoldenRod', 'DarkOliveGreen'],
    li = document.getElementById('colorthis').getElementsByTagName('li');

for(var i = 0; i < li.length; i++) {
    var elem = li[i],
        color = colors[0];
    elem.style.color = color;
    colors.push(color);
    colors.shift();
}

您只需定义一个颜色列表和每个列表元素的循环样式。使用后，颜色会附加到颜色列表中，因此您可以使用有限的颜色列表设置无限数量的元素。

【讨论】：

这看起来很棒。请问，.push 和 .shift 的作用是什么？
这只是将第一个数组元素移动到该数组末尾的例程。 .push 将第一个颜色附加到数组 (colors[0]) 并 shift 删除现在重复的第一个元素。下次颜色[0] 将是另一种颜色。
你很聪明。我最后的困惑——如何在某个 div 中定位
？

【解决方案3】：

你想要这样：

$(".item").click(function() {  
  if ($(this).hasclass("A")) {
    coorColor = "blue";
  } else if ($(this).hasclass("B") {
    coorColor = "red";
  }

  $("body").css("background", coorColor);
});

【讨论】：

为什么点击？他没有说任何关于点击的事情。它应该正在加载中。

【解决方案4】：

使用 CSS：

li.a{
    color:#000000;
}

li.b{
    color:#ff00ff;
}

工作演示： http://jsfiddle.net/VJJnD/1/

jQuery 宽度：

$('li.a').css('color', '#000000');
$('li.b').css('color', '#ff00ff');

工作演示：http://jsfiddle.net/VJJnD/

【讨论】：