javascript - 最小化 jQuery 代码

Question

您建议如何最小化此代码？如您所见，有很多重复代码。

我相信你们中的许多人可能都编写过我下面的代码。但我希望有一种方法可以缩短所需的代码量。

非常感谢任何帮助:)

if(index >= 2 && index <= 5)
{
    $(".menu-item-2 img").attr( "src" , "images/menu-market-active.png"  );
    $(".menu-item-3 img").attr( "src" , "images/menu-quote.png"  ); 
    $(".menu-item-4 img").attr( "src" , "images/menu-order.png"  ); 
    $(".menu-item-5 img").attr( "src" , "images/menu-in.png"  ); 
    $(".menu-item-6 img").attr( "src" , "images/menu-taking.png"  ); 
}
if(index >= 6 && index <= 10)
{
    $(".menu-item-2 img").attr( "src" , "images/menu-market.png"  );
    $(".menu-item-3 img").attr( "src" , "images/menu-quote-active.png"  ); 
    $(".menu-item-4 img").attr( "src" , "images/menu-order.png"  ); 
    $(".menu-item-5 img").attr( "src" , "images/menu-in.png"  ); 
    $(".menu-item-6 img").attr( "src" , "images/menu-taking.png"  ); 
}
if(index >= 11 && index <= 16)
{
    $(".menu-item-2 img").attr( "src" , "images/menu-market.png"  );
    $(".menu-item-3 img").attr( "src" , "images/menu-quote.png"  ); 
    $(".menu-item-4 img").attr( "src" , "images/menu-order-active.png"  ); 
    $(".menu-item-5 img").attr( "src" , "images/menu-in.png"  ); 
    $(".menu-item-6 img").attr( "src" , "images/menu-taking.png"  ); 
}
if(index >= 17 && index <= 21)
{
    $(".menu-item-2 img").attr( "src" , "images/menu-market.png"  );
    $(".menu-item-3 img").attr( "src" , "images/menu-quote.png"  ); 
    $(".menu-item-4 img").attr( "src" , "images/menu-order.png"  ); 
    $(".menu-item-5 img").attr( "src" , "images/menu-in-active.png"  ); 
    $(".menu-item-6 img").attr( "src" , "images/menu-taking.png"  ); 
}
if(index >= 22)
{
    $(".menu-item-2 img").attr( "src" , "images/menu-market.png"  );
    $(".menu-item-3 img").attr( "src" , "images/menu-quote.png"  ); 
    $(".menu-item-4 img").attr( "src" , "images/menu-order.png"  ); 
    $(".menu-item-5 img").attr( "src" , "images/menu-in.png"  ); 
    $(".menu-item-6 img").attr( "src" , "images/menu-taking-active.png"  ); 
}

编辑:

图像是横跨页面底部的菜单栏。有点像一本书的章节。当您在该部分时，一个按钮将显示为已激活(不同的图像)，而其他按钮则不会。我也在使用 jQuery 循环。

Answer 1

一个简单的 jQuery 插件(这只适用于第一个匹配的元素):

$.fn.activate = function () {
   var firstElement = this[0],
       $img,
       src;       

   // Deactivate all the other ones
   $("img").each(function () { // <-- customise this selector to match all images
        $img = $(this);
        src = $img.attr("src"); 
        if (src.indexOf("-active") > -1) {
            $img.attr("src", src.replace("-active", ""));
        }        
    });

   // Activate this one
   firstElement.attr("src", firstElement.attr("src").replace(".png", "-active.png"));  
};

然后像这样应用插件:

if(index >= 2 && index <= 5) {
    $(".menu-item-2 img").activate();
} else if (index >= 6 && index <= 10) {
    $(".menu-item-3 img").activate();
} else if (index >= 11 && index <= 16) {
    $(".menu-item-4 img").activate();
} else if (index >= 17 && index <= 21) {
    $(".menu-item-5 img").activate();
} else if (index >= 22) {
    $(".menu-item-6 img").activate();
}