javascript - 每当用户添加一个, jquery 从数组中选择特定的颜色

Question

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

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

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

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

Answer 1

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

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

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

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

Answer 2

像这样的小提琴？

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

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

Answer 3

你想要这样：

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

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

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