Упрощение кода jQuery

У меня есть карта, в которой при нажатии на область под картой появляется div, относящаяся к этой области. Для этого он был упрощен.Упрощение кода jQuery

В принципе, у меня код 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();});

Спасибо!

источник

2013-12-22 Ross

добавлять классы ко всем из них и назначать обработчик событий один раз в классе. – Rooster

Отзывы принадлежат на codereview.stackexchange.com. –

@turtlebyte Вот [Fiddle] (http://jsfiddle.net/mdesdev/8pARv/) просто скажите, что добавить. – mdesdev

Если вы используете более общие селекторы, я думаю, вы можете устранить много дублированного код в вашем примере , Я сделал быстрый проход и придумал следующее:

$('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.

источник

2013-12-22 23:26:53 psquared

Это отлично работает - спасибо! – Ross

Никто, кроме вас, не может пройти все за вас, но я просто приведу один пример того, как сделать его короче.

У вас есть этот код в одном разделе ..

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

дать все эти идентификаторы и тот же класс в HTML ... позволяет сказать, класс = «регионы-2». Таким образом, вы можете сделать этот код коротким, очень легко.

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

источник

2013-12-22 22:25:02 CRABOLO

Вы можете использовать уникальный <div> тег, и, нажав одну из представленных выше ссылок вы изменить содержание <div> с текстом функции.

источник

2013-12-22 22:29:43 watou

Я дал вам быстрый jsFiddle, который может помочь. Обратите внимание, что ключ к моей версии, имеющее отображение в идентификаторах с этой линией

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

Fiddle http://jsfiddle.net/nBb7g/4/

источник

2013-12-22 22:31:13 user2923779

Упрощение кода jQuery

ответ

Смежные вопросы