javascript - 必须在多个位置重复 JS block ，如何创建更实用的方法

Question

我正在创建一种双重导航菜单/ map 功能，您可以单击某些位置，然后将显示一个新面板，隐藏以前查看的面板。还具有 map 悬停效果。这是我正在做的JSFiddle .

我正在尝试找出一种最佳方法来缩短我的功能，因为会有多个位置。下面的 block 是我在新位置上一遍又一遍地重复的 block 。它涵盖了 map 上的点击和悬停。我知道重复下面的 block 是不切实际的，所以我希望有人可以指导我。

$('a#united-states').click(function(event){
    $('.list').removeClass('current');
    $('div.united-states').addClass('current');                        
    event.preventDefault();
})
$('span.us').mouseover(function(){
   $('.list').removeClass('current');
   $('div.united-states').addClass('current');
}).mouseout(function(){
   $('div.united-states').removeClass('current');
   $('.list').addClass('current');
}).css('cursor', 'pointer');

HTML

<div class="panel list current">
        <ul class="locations">
          <li><a href="#" id="united-states">United States</a></li>  
          <li><a href="#" id="canada">Canada</a></li>  
          <li><a href="#" id="africa">Africa</a></li>  
        </ul>
    </div>

    <div class="panel united-states">
        <h3>United States of America</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec quam tristique, ullamcorper dolor at, facilisis dui. Sed faucibus eros vel purus finibus congue. Phasellus non ante laoreet, faucibus metus vel, accumsan massa. Sed tincidunt eros sed purus interdum, id vehicula elit rhoncus. </p>
        <p><a href="#" id="list">Back to list</a></p>
    </div><!--/.panel-->

JSFiddle链接应该给出更好的主意。如果没有更好的方法，请告诉我，我非常乐意接受这个:)非常感谢!

Answer 1

给所有地区/国家 a 元素一个公共(public)类，比如 region 和所有 span 元素一个公共(public)类，比如 固定。然后，对于每个 a 或 span 元素，将 id 替换为或添加与地区/国家匹配的 data-attribute。现在，添加多少个区域并不重要，只要遵守这些简单的规则，以下代码应该适用于所有区域/国家:

$('.region').click(function(event){
    $('.list').removeClass('current');
    var region = $(this).data('region');
    $('div.' + region).addClass('current');                        
    event.preventDefault();
});
$('.map > .pin').mouseover(function(){
    $('.list,.panel').removeClass('current');
    var region = $(this).data('region');
    $('div.' + region).addClass('current');
}).mouseout(function(){
    var region = $(this).data('region');
    $('div.' + region).removeClass('current');
    $('.list').addClass('current');
}).css('cursor', 'pointer');

DEMO

编辑1:

要使反向链接正常工作，请执行以下操作。变化:

<p><a href="#" id="list">Back to list</a></p>

致:

<p><a href="#" class="back-list">Back to list</a></p>

然后添加以下代码:

$('.back-list').on('click', function(e) {
    e.preventDefault();
    $('.panel').removeClass('current');
    $('.list').addClass('current');
});

您不想使用重复的 ID，每个 ID 都必须是唯一的。事实上，您甚至可能不需要 ID。

DEMO