必须为多个位置重复 JS 块我怎样才能创建一个更实用的方法

Question

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

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

$('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 link 应该给个更好的主意。如果没有更好的方法，请告诉我我很乐意忍受这个 :) 非常感谢！

Answer 1

您可以使用 id 属性。例如：

$('a').click(function(event){
    var loc = this.id; // united-states | canada | africa

    if( loc == 'list' ) {
        $('.panel').removeClass('current');
        $('.list').addClass('current');
        return;
    }

    $('.list').removeClass('current');
    $('div.' + loc).addClass('current');
    event.preventDefault();
});

关于鼠标悬停，您可以获取 class 属性并将 class 'us' 更改为 'united-states' 以保持一致：

<div class="map">
    <!-- changed class to 'united-states' -->
    <span class="united-states"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-location-128.png" alt="US location" /></span>
    <!-- changed end -->
</div>

$('span').mouseover(function(){
    var loc = $( this ).attr( 'class' ); // us | canada | africa
    $('.list').removeClass('current');
    $('div.' + loc).addClass('current');
}).mouseout(function(){
    var loc = $( this ).attr( 'class' ); // us | canada | africa
    $('div.' + loc).removeClass('current');
    $('.list').addClass('current');
}).css('cursor', 'pointer');

Answer 2

给所有 region/country a 元素一个公共的 class，比如 region 和所有 span 元素一个公共的 class，说 pin。然后为每个 a 或 span 元素替换 id 或添加匹配 region/country 的 data-attribute。现在，添加多少区域都无关紧要，只要您坚持这些简单的规则，以下代码应该适用于所有 regions/countries:

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

为了后面 link 工作 -- 请执行以下操作。变化：

<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

必须为多个位置重复 JS 块我怎样才能创建一个更实用的方法

Having to repeat JS block for multiple locations how can I create a more practical method

javascript

jquery

addclass

removeclass