Question

我正在创建一种双导航菜单/地图功能，您可以在其中单击某些位置并显示一个新面板，隐藏以前查看过的面板。还有一个地图悬停效果。以下是我正在研究的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链接应该提供更好的主意。如果没有更好的方法，请告诉我，我很高兴能够忍受这个:)非常感谢！

Answer 1

为所有地区/国家a元素提供一个公共类，比如说region，所有span元素都是一个公共类，比如说pin。然后，为每个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

Answer 2

您可以使用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属性并将类'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');

必须为多个位置重复JS块，如何创建更实用的方法

2 个答案: