简化一些jQuery代码

我有一个地图，当点击一个地区时，与该地区有关的div出现在地图下方。为了这个目的，它被简化了。简化一些jQuery代码

基本上，我有jQuery代码排序，但它是非常漫长和笨拙 - 我敢肯定有一个更简单和更简单的方法来做到这一点。

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这里是[小提琴]（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

这里没有人会为你做所有事情，但我只举一个例子，说明如何缩短它。

你有一个部分类=“区域-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(); 
    } 
};

来源

2013-12-22 22:25:02 CRABOLO

您可以使用一个独特的<div>标签，并通过点击上述链接之一修改<div>与文本功能的内容。

来源

2013-12-22 22:29:43 watou

我给了你一个快速的jsFiddle，可能会有所帮助。注意的关键，我的版本是有这一行的标识映射

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

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

来源

2013-12-22 22:31:13 user2923779

简化一些jQuery代码

回答

相关问题