簡化一些jQuery代碼

Question

我有一個地圖，當點擊一個地區時，與該地區有關的div出現在地圖下方。爲了這個目的，它被簡化了。

基本上，我有jQuery代碼排序，但它是非常漫長和笨拙 - 我敢肯定有一個更簡單和更簡單的方法來做到這一點。

http://jsfiddle.net/rupfield23/nBb7g/3/

HTML：

<a href="#" id="sh_north-america">North America Image</a><br> 
<a href="#" id="sh_south-america">South America Image</a><br> 
<a href="#" id="sh_europe">Europe Image</a><br> 
<a href="#" id="sh_africa">Africa Image</a><br> 
<a href="#" id="sh_middle-east">Middle East Image</a><br> 
<a href="#" id="sh_western-asia">Western Asia Image</a><br> 
<a href="#" id="sh_far-east">Far East Image</a><br> 
<a href="#" id="sh_australasia">Australasia Image</a> 


<div id="list_north-america">North America List</div> 
<div id="list_south-america">South America List</div> 
<div id="list_europe">Europe List</div> 
<div id="list_africa">Africa List</div> 
<div id="list_middle-east">Middle East List</div> 
<div id="list_western-asia">Western Asia List</div> 
<div id="list_far-east">Far East List</div> 
<div id="list_australasia">Australasia List</div> 

JS：

個

$('#list_north-america').hide(); 
$('#list_south-america').hide(); 
$('#list_europe').hide(); 
$('#list_africa').hide(); 
$('#list_middle-east').hide(); 
$('#list_western-asia').hide(); 
$('#list_far-east').hide(); 
$('#list_australasia').hide(); 



$('#sh_north-america').click(function(e){e.stopPropagation();$('#list_north-america').fadeIn();$('#map').addClass('expand');}); 
$('#list_north-america').click(function(e){e.stopPropagation();}); 
$(document).click(function(){$('#list_north-america').fadeOut();$('#map').removeClass('expand');}); 
$('#sh_south-america').click(function(){$('#list_north-america').fadeOut();}); 
$('#sh_europe').click(function(){$('#list_north-america').fadeOut();}); 
$('#sh_africa').click(function(){$('#list_north-america').fadeOut();}); 
$('#sh_middle-east').click(function(){$('#list_north-america').fadeOut();}); 
$('#sh_western-asia').click(function(){$('#list_north-america').fadeOut();}); 
$('#sh_far-east').click(function(){$('#list_north-america').fadeOut();}); 
$('#sh_australasia').click(function(){$('#list_north-america').fadeOut();}); 

$('#sh_south-america').click(function(e){e.stopPropagation();$('#list_south-america').fadeIn();$('#map').addClass('expand');}); 
$('#list_south-america').click(function(e){e.stopPropagation();}); 
$(document).click(function(){$('#list_south-america').fadeOut();$('#map').removeClass('expand');}); 
$('#sh_north-america').click(function(){$('#list_south-america').fadeOut();}); 
$('#sh_europe').click(function(){$('#list_south-america').fadeOut();}); 
$('#sh_africa').click(function(){$('#list_south-america').fadeOut();}); 
$('#sh_middle-east').click(function(){$('#list_south-america').fadeOut();}); 
$('#sh_western-asia').click(function(){$('#list_south-america').fadeOut();}); 
$('#sh_far-east').click(function(){$('#list_south-america').fadeOut();}); 
$('#sh_australasia').click(function(){$('#list_south-america').fadeOut();}); 

$('#sh_europe').click(function(e){e.stopPropagation();$('#list_europe').fadeIn();$('#map').addClass('expand');}); 
$('#list_europe').click(function(e){e.stopPropagation();}); 
$(document).click(function(){$('#list_europe').fadeOut();$('#map').removeClass('expand');}); 
$('#sh_north-america').click(function(){$('#list_europe').fadeOut();}); 
$('#sh_south-america').click(function(){$('#list_europe').fadeOut();}); 
$('#sh_africa').click(function(){$('#list_europe').fadeOut();}); 
$('#sh_middle-east').click(function(){$('#list_europe').fadeOut();}); 
$('#sh_western-asia').click(function(){$('#list_europe').fadeOut();}); 
$('#sh_far-east').click(function(){$('#list_europe').fadeOut();}); 
$('#sh_australasia').click(function(){$('#list_europe').fadeOut();}); 

$('#sh_africa').click(function(e){e.stopPropagation();$('#list_africa').fadeIn();$('#map').addClass('expand');}); 
$('#list_africa').click(function(e){e.stopPropagation();}); 
$(document).click(function(){$('#list_africa').fadeOut();$('#map').removeClass('expand');}); 
$('#sh_north-america').click(function(){$('#list_africa').fadeOut();}); 
$('#sh_south-america').click(function(){$('#list_africa').fadeOut();}); 
$('#sh_europe').click(function(){$('#list_africa').fadeOut();}); 
$('#sh_middle-east').click(function(){$('#list_africa').fadeOut();}); 
$('#sh_western-asia').click(function(){$('#list_africa').fadeOut();}); 
$('#sh_far-east').click(function(){$('#list_africa').fadeOut();}); 
$('#sh_australasia').click(function(){$('#list_africa').fadeOut();}); 

$('#sh_middle-east').click(function(e){e.stopPropagation();$('#list_middle-east').fadeIn();$('#map').addClass('expand');}); 
$('#list_middle-east').click(function(e){e.stopPropagation();}); 
$(document).click(function(){$('#list_middle-east').fadeOut();$('#map').removeClass('expand');}); 
$('#sh_north-america').click(function(){$('#list_middle-east').fadeOut();}); 
$('#sh_south-america').click(function(){$('#list_middle-east').fadeOut();}); 
$('#sh_europe').click(function(){$('#list_middle-east').fadeOut();}); 
$('#sh_africa').click(function(){$('#list_middle-east').fadeOut();}); 
$('#sh_western-asia').click(function(){$('#list_middle-east').fadeOut();}); 
$('#sh_far-east').click(function(){$('#list_middle-east').fadeOut();}); 
$('#sh_australasia').click(function(){$('#list_middle-east').fadeOut();}); 

$('#sh_western-asia').click(function(e){e.stopPropagation();$('#list_western-asia').fadeIn();$('#map').addClass('expand');}); 
$('#list_western-asia').click(function(e){e.stopPropagation();}); 
$(document).click(function(){$('#list_western-asia').fadeOut();$('#map').removeClass('expand');}); 
$('#sh_north-america').click(function(){$('#list_western-asia').fadeOut();}); 
$('#sh_south-america').click(function(){$('#list_western-asia').fadeOut();}); 
$('#sh_europe').click(function(){$('#list_western-asia').fadeOut();}); 
$('#sh_africa').click(function(){$('#list_western-asia').fadeOut();}); 
$('#sh_middle-east').click(function(){$('#list_western-asia').fadeOut();}); 
$('#sh_far-east').click(function(){$('#list_western-asia').fadeOut();}); 
$('#sh_australasia').click(function(){$('#list_western-asia').fadeOut();}); 

$('#sh_far-east').click(function(e){e.stopPropagation();$('#list_far-east').fadeIn();$('#map').addClass('expand');}); 
$('#list_far-east').click(function(e){e.stopPropagation();}); 
$(document).click(function(){$('#list_far-east').fadeOut();$('#map').removeClass('expand');}); 
$('#sh_north-america').click(function(){$('#list_far-east').fadeOut();}); 
$('#sh_south-america').click(function(){$('#list_far-east').fadeOut();}); 
$('#sh_europe').click(function(){$('#list_far-east').fadeOut();}); 
$('#sh_africa').click(function(){$('#list_far-east').fadeOut();}); 
$('#sh_middle-east').click(function(){$('#list_far-east').fadeOut();}); 
$('#sh_western-asia').click(function(){$('#list_far-east').fadeOut();}); 
$('#sh_australasia').click(function(){$('#list_far-east').fadeOut();}); 

$('#sh_australasia').click(function(e){e.stopPropagation();$('#list_australasia').fadeIn();$('#map').addClass('expand');}); 
$('#list_australasia').click(function(e){e.stopPropagation();}); 
$(document).click(function(){$('#list_australasia').fadeOut();$('#map').removeClass('expand');}); 
$('#sh_north-america').click(function(){$('#list_australasia').fadeOut();}); 
$('#sh_south-america').click(function(){$('#list_australasia').fadeOut();}); 
$('#sh_europe').click(function(){$('#list_australasia').fadeOut();}); 
$('#sh_africa').click(function(){$('#list_australasia').fadeOut();}); 
$('#sh_middle-east').click(function(){$('#list_australasia').fadeOut();}); 
$('#sh_western-asia').click(function(){$('#list_australasia').fadeOut();}); 
$('#sh_far-east').click(function(){$('#list_australasia').fadeOut();}); 

謝謝！

Answer 1

如果您使用更普遍的選擇，我覺得你可以消除大量的重複的代碼在你的榜樣。我做了一個快速通過，並想出了這個：

$('div[id^=list_]').hide(); 

$('[id^=sh_]').click(function (e) { 
    var list = $('#list_' + e.target.id.slice(3)); 
    e.stopPropagation(); 
    list.fadeIn(); 
    $('[id^=list_]').not(list).fadeOut(); 
    $('#map').addClass('expand'); 
}); 

$('[id^=list_]').click(function (e) { 
    e.stopPropagation(); 
}); 

$(document).click(function() { 
    $('[id^=list_]').fadeOut(); 
    $('#map').removeClass('expand'); 
}); 

您可能能夠進一步優化。

JSFiddle。

Answer 2

這裏沒有人會爲你做所有事情，但我只舉一個例子，說明如何縮短它。

你有一個部分類=「區域-2」這個代碼..

$('#sh_north-america').click(function(){$('#list_africa').fadeOut();}); 
$('#sh_south-america').click(function(){$('#list_africa').fadeOut();}); 
$('#sh_europe').click(function(){$('#list_africa').fadeOut();}); 
$('#sh_middle-east').click(function(){$('#list_africa').fadeOut();}); 
$('#sh_western-asia').click(function(){$('#list_africa').fadeOut();}); 
$('#sh_far-east').click(function(){$('#list_africa').fadeOut();}); 
$('#sh_australasia').click(function(){$('#list_africa').fadeOut();}); 

給所有這些ID在HTML中的同一類......讓說。所以你可以很簡單地將上面的代碼縮短。

$('.regions-2').click(function(){ 
    $('#list_africa').fadeOut(); 
    } 
}; 

Answer 3

您可以使用一個獨特的<div>標籤，並通過點擊上述鏈接之一修改<div>與文本功能的內容。

Answer 4

我給了你一個快速的jsFiddle，可能會有所幫助。注意的關鍵，我的版本是有這一行的標識映射

var country = linkObj.attr('id').split('_').pop(); 

小提琴 http://jsfiddle.net/nBb7g/4/