2010-05-28 95 views
1

我下面寫的jQuery代碼:jQuery的當前菜單代碼優化

var href = window.location.href; 
if (href.search('/welcome\\/') > 0) 
{ 
    $('.menuwelcome').css('display', 'block'); 
    $('#welcome2').append('<b>Приглашаем субагентов</b>').find('a').remove(); 
    $('#welcome2').find('img').attr('src', '/static/images/arrow_black.gif'); 
} 
if (href.search('/contacts\\/') > 0) 
{ 
    $('.menuwelcome').css('display', 'block'); 
    $('#mcontacts').append('<b>Контакты</b>').find('a').remove(); 
    $('#mcontacts').find('img').attr('src', '/static/images/arrow_black_down.gif'); 
} 
if (href.search('/sindbad_history\\/') > 0) 
{ 
    $('.menuwelcome').css('display', 'block'); 
    $('.menuwelcome:first').append('<b>История</b>').find('a').remove(); 
    $('.menuwelcome:first').find('img').attr('src', '/static/images/arrow_black.gif'); 
} 
if (href.search('/insurance\\/') > 0) 
{ 
    $('.menusafe').css('display', 'block'); 
    $('#msafe').append('<b>Страхование</b>').find('a').remove(); 
    $('#msafe').find('img').attr('src', '/static/images/arrow_black_down.gif'); 
} 
if (href.search('/insurance_advices\\/') > 0) 
{ 
    $('.menusafe').css('display', 'block'); 
    $('.menusafe:first').append('<b>Полезная информация</b>').find('a').remove(); 
    $('.menusafe:first').find('img').attr('src', '/static/images/arrow_black.gif'); 
} 

上面的代碼有重複性的任務,我們可以使代碼緊湊? 我想盡量減少這段代碼。我應該如何實現這一目標?

+0

您可以向我們展示菜單的HTML嗎? – Skilldrick 2010-05-28 10:40:47

+0

最小化代碼與StackOverflow無關 – 2015-08-31 11:19:28

回答

3

將所有的變量數組的字典位:

cases = { 
    '/welcome\\/' : ['.menuwelcome', '#welcome2' , 'Приглашаем субагентов', 'arrow_black.gif'  ], 
    '/contacts\\/': ['.menuwelcome', '#mcontacts', 'Контакты'    , 'arrow_black_down.gif'], 
    ... 
}; 

然後遍歷所有的情況:

for (c in cases) { 
    if (href.search(c)) { 
     a = cases[c]; 
     $(a[0]).css('display', 'block'); 
     $(a[1]).append('<b>' + a[2] + '</b>').find('a').remove(); 
     $(a[1]).find('img').attr('src', '/static/images/' + a[3]); 
    } 
} 
+1

好主意。請注意,圖片網址在各種情況下也不相同。一旦你找到了一場比賽,可能也想「擺脫」這個循環。 – tvanfosson 2010-05-28 10:48:53

+0

謝謝@tvanfosson。我錯過了圖像中的變化。修訂。 – 2010-05-28 10:57:53

0

如果要刪除的鏈接包含要插入相同的文本,我懷疑是這種情況,你可以使用unwrap而不是跟蹤它。這將使它對文本中的更改更加反應。我還希望使用類來更改「當前」菜單項的字體樣式。關閉@ Marcelo的解決方案:

$(a[1]).find('a').unwrap().addClass('current-menu-item');