如何使用 jquery 修改 Nivo Slider 中的控制导航？

Question

我正在尝试自定义 Nivo 滑块。我已将这些样式添加到 Nivo 滑块。这样，nav 控件就变成了正方形。

.nivo-control {
    background-color:#eecd0d;
    height:19px;
    width:19px;
    margin-left:5px;
    float:left;
    text-indent:-9999px;
    text-decoration:none;
}

这很好用，使所有数字看起来都像正方形。现在我想做的是让每个正方形（总是有四个）不同的颜色。我所做的是创建 3 个不同的类（第一种颜色由 nivo-control 定义）。看起来是这样的：

.second_li {
    background-color:#ab62bc;
}

.third_li {
    background-color:#c491d0;
}

.fourth_li {
    background-color:#d6b2de;
}

问题似乎出在 jQuery 代码上。我正在使用addClass 将样式动态添加到控件中，但它似乎不起作用。

$(function(){
    $(".nivo-controlNav a:nth-child(2)").addClass('second_li);
    $(".nivo-controlNav a:nth-child(3)").addClass('third_li);
    $(".nivo-controlNav a:nth-child(4)").addClass('fourth_li);
});

Answer 1

让我印象深刻的是 jQuery 代码块上突出显示的语法。注意在第 3 行，整行是红色的，直到它到达下一个引号。我认为您的代码很好，但是，您忘记在 .addClass() 参数之后添加封闭外套。你的代码应该是这样的

$(function(){
  $(".nivo-controlNav a:nth-child(2)").addClass('second_li');
  $(".nivo-controlNav a:nth-child(3)").addClass('third_li');
  $(".nivo-controlNav a:nth-child(4)").addClass('fourth_li');
});