简化一些jQuery代码

debugcn 发表于 Dev

罗斯

我有一张地图，单击某个区域时，div与该区域相关的内容会显示在地图下方。为此，它已被简化。

基本上，我对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();});

谢谢！

平方

如果您使用更多通用选择器，我认为您可以在示例中消除很多重复的代码。我快速通过并提出了以下建议：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。