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();
}

Answer 2

如果可能的话，我会改写它来改为使用CSS类和背景图像。像这样：

.menu-item { /* base settings for all menu items */ }

.menu-item.market {
    background-image: url('images/menu-market.png');
}
.menu-item.market.active {
    background-image: url('images/menu-market-active.png');
}

.menu-item.quote {
    background-image: url('images/menu-quote.png');
}
.menu-item.quote.active {
    background-image: url('images/menu-quote-active.png');
}

/* Same for 'order', 'in' and 'taking' */

现在你在JavaScript中所做的就是这样（曾经）：

$(".menu-item-2").addClass('menu-item market');
$(".menu-item-3").addClass('menu-item quote');
$(".menu-item-4").addClass('menu-item order');
$(".menu-item-5").addClass('menu-item in');
$(".menu-item-6").addClass('menu-item taking');

这（当index更改时）：

$('.menu-item').removeClass('active');

if(index >= 2 && index <= 5) {
    $('.menu-item.market').addClass('active');
} else if (index >= 6 && index <= 10) {
    $('.menu-item.quote').addClass('active');
} else if (index >= 11 && index <= 16) {
    $('.menu-item.order').addClass('active');
} else if (index >= 17 && index <= 21) {
    $('.menu-item.in').addClass('active');
} else if (index >= 22) {
    $('.menu-item.taking').addClass('active');
}

采用这种方法有两个主要优点：

逻辑和演示的分离。通过添加类来描述它是什么，而不是它应该是什么样的。这样可以很容易地返回，例如，更改图标。
您可以在HTML中使用.menu-item-2类（如果可以更改）并迭代.menu-item-3，而不是使用menu-item，$(.menu-item)等。< / LI>

希望这有帮助。

Answer 3

有点混淆，但应该完成工作：

var current = 0, src, images = ['','','market','quote','order','in','taking'],
    active = [0,0,2,2,2,2,3,3,3,3,3,4,4,4,4,4,4,5,5,5,5,5,6];

if(active[index]) { current = active[index]; }
else if(index > active.length) { current = 6; }

for(var i=2; i<7; i++) {
    src = "images/menu-" + images[i];
    if(i == current) { src += "-active"; }
    src += ".png";
    $(".menu-item-" + i + " img").attr("src", src);
}

Answer 4

你可以从这开始：

$(".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.png"  );

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

Answer 5

请注意，以下表达式将为您提供需要使用活动图像的菜单项的编号

Math.floor((index-2)/5+2);

然后您可以将其余代码简化为。

$(".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.png");

var active = Math.floor((index-2)/5+2), $active_menu = $(".menu-item-"+active+" img");

$active_menu.attr("src", $active_menu.attr("src").replace(".png", "-active.png"));

Answer 6

1：在所有菜单项中添加id="i"，将css类属性设置为equaly class="menu-item"

<强> 2

$('.menu-item').click(function () {
    $('.menu-item').each(function(){
        /* Unselected picture */
        $(this img).attr('src', 'images/menu-' + $(this).attr('id') + '_unselected.png');
    });
    /* selected picture */
    $(this img).attr('src', 'images/menu-' + $(this).attr('id') + '_selected.png');
});

最小化jQuery代码

6 个答案: