您建议如何最小化此代码?如您所见,有很多重复代码。
我相信你们中的许多人可能都编写过我下面的代码。但我希望有一种方法可以缩短所需的代码量。
非常感谢任何帮助:)
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 循环。
最佳答案
一个简单的 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();
}
关于javascript - 最小化 jQuery 代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8727388/