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

Posted 2023-05-08

【中文标题】jQuery，悬停一个有序的颜色数组，然后在单击时设置悬停颜色

【英文标题】：jQuery, hover an ordered array of colors, then set that hover color on click

【发布时间】：2012-12-29 22:12:55

【问题描述】：

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

我的问题的一个例子是in this fiddle（及以下），我的脚本在很大程度上受到以前称为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', '');
                 
            
        );

    );

    );

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

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

【参考方案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

【讨论】：

太棒了！谢谢你，@kei。你剪掉了很多多余的想法，看起来像……现在它像梦一样运作！对于像我这样的其他新手，kei 的代码直接在声明颜色数组之后。