jQuery，悬停一个有序的颜色数组，然后在单击时设置悬停颜色

Question

我遇到了垂直菜单的问题，它是悬停动作。我的客户要求悬停颜色从一组 5 种颜色中按顺序变化。

我的问题的一个例子是in this fiddle（及以下），我的脚本在很大程度上受到以前称为Keep :hover color on mouse click via Jquery 的stackoverflow 问题的影响。

我想要发生的是，每次悬停时，颜色都会通过数组发生变化。一旦用户单击其中一个链接，该链接将更改为显示其悬停颜色（如活动状态），但仅在单击另一个链接之前，该链接将成为其自己的颜色（切换活动状态到新链接）。如果活动颜色与悬停颜色相同，那就太好了，但不是必需的。

HTML和CSS都是标准的，我的脚本如下：

    jQuery(document).ready(function($) {

    var colors = ["#737b35","#f57b20","#cbb778","#717174","#3a6f8f"];  

    $("#menu-sidebar-menu li a").each(function(i){

        $(this).click(function() {
            $("#menu-sidebar-menu li a").each(function(i,elem) { // clear the style first
                 $(elem).removeClass("clicked");
           });//so only ONE element is coloured SELECTED
           $(this).addClass("clicked");//add the "selected" colour
        });

        $(this).hover(
            function() {
                if(!$(this).hasClass("clicked")) {
        $("#menu-sidebar-menu li a").css('background', '');
                    $(this).css('background', colors[i % colors.length]);
                }
            }, 
            function(){
                if(!$(this).hasClass("clicked")) {
                    $(this).css('background', '');
                } 
            }
        );

    });

    });

正如我现在所拥有的，悬停动作非常完美。但是，一旦单击 2 个或更多链接，背景颜色就会保持不变，并且不会按照我需要的方式从链接切换到链接。

我正在尝试掌握 jQuery，但我没有人可以问愚蠢的问题，所以我非常感谢任何和所有的帮助！

Answer 1

  $("#menu-sidebar-menu li a")
    .click(function () {
      $("#menu-sidebar-menu li a").removeClass("clicked").not(this).css('background', '');
      $(this).addClass("clicked");
    })
    .hover(
      function () {
        if (!$(this).hasClass("clicked"))
          $(this).css('background', colors[$(this).index("#menu-sidebar-menu li a") % colors.length]);
      },
      function () {
        if (!$(this).hasClass("clicked"))
          $(this).css('background', '');
      }
    );

DEMO