简化一些jQuery代码

时间：2013-12-22 22:19:33

标签： javascript jquery html

我有一张地图，当点击某个地区时，与该地区相关的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();});


谢谢！

4 个答案:

答案 0 :(得分：0)

这里没有人可能会为你解决所有事情，但我只举一个如何缩短它的例子。

您在一个部分中拥有此代码.. 

$('#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中给所有这些id是同一个类...让我们说class =“regions-2”。所以你可以很容易地将上面的代码变得简单。

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

答案 1 :(得分：0)

您可以使用唯一的<div>代码，点击上面的其中一个链接即可修改<div>的文字内容。

答案 2 :(得分：0)

我给了你一个可能有帮助的快速jsFiddle。请注意，我的版本的关键是在ID中使用此行进行映射

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

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

答案 3 :(得分：0)

如果您使用更多通用选择器，我认为您可以在示例中消除大量重复代码。我快速通过并想出了这个：

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

相关问题
最新问题