jQuery，将鼠标悬停在有序的颜色数组上，然后在单击时设置悬停颜色

Question

我在使用垂直菜单及其悬停操作时遇到问题。我的客户要求悬停颜色从一组 5 种颜色中按顺序更改。

我的问题的一个例子 in this fiddle (及下文)，我的脚本很大程度上受到之前的 stackoverflow 问题 Keep :hover color on mouse click via Jquery 的影响。 .

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

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', '');
                } 
            }
        );

    });

    });

就我现在而言，悬停 Action 是完美的。但是，一旦单击 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