Question

JQuery neewbie在制作JQuery解决方案时遇到了一些麻烦。

我正在尝试制作一个世界的互动地图。用户可以将鼠标悬停在标记上（地图上的特定地点），这使得信息框fadeIn中包含名称和有关该地点的一些信息。当我用光标离开标记时，框再次淡出。

下面的代码是带有挪威国家锚标签的html标记，与德国，意大利，英国等示例相同，但当然具有不同的位置。

<div id="mapWrapper">
    <div id="map_container">
        <a class="marker" style="top:14%; left:34%;" data-info="norway"></a>
        <div class="info_box"></div>
        <div class="info" id="norway">
        <h2>Norway - Scandinavia</h2> 
            lorem ipsum lorem ipsum lorem ipsum
    </div>
</div>
        <a class="marker" style="top:10%; left:55%;" data-info="iran"></a>
        <div class="info_box"></div>
        <div class="info" id="iran">
        <h2>Iran Republic - Asia</h2> 
            lorem ipsum lorem ipsum lorem ipsum
    </div>
</div>

到目前为止的JQuery：

$(document).ready(function(){
    $('a.marker').mouseover(function(){
        var $link = $(this);
        var countryName = $link.data('info');
        var linkPosition = $link.position();
        var infoBoxTopPos = linkPosition.top - 130 + "px";
        var infoBoxLeftPos = linkPosition.left - 120+ "px";
        var container = $('.info' + '#' + countryName).html();
        $('a.marker').removeClass('current');
        $link.addClass('current');
        $('.info_box').html(container).css({
            'top' : infoBoxTopPos,
            'left' : infoBoxLeftPos
        }).show();
    }).mouseleave(function(){
        /*$('.info_box').fadeOut(100);*/
    });
});

这里的问题是，每当我将鼠标悬停在标记上时，它会给我2个相同的信息框，而不是只有1.当我用Firebug检查时，两个框都是相同的div。我知道来自CSS的display:none它，所以当JQuery运行时，它会显示一个新的.info_box，以及“隐藏”的那个？因为addCLass可能？

如下图所示，带有info_box的白色标记是正确的，但我不明白为什么第二个info_box会出现在右边？

enter image description here

我有点困惑而且当时卡住了，我似乎无法“得到它”。

任何帮助，提示或技巧都会受到普遍赞赏。

Answer 1

一旦你要显示的盒子有一个任务我就不应该成为一个问题。

步骤1

创建所有想要在地图中使用的div并给它们相同的类名但不同我将此类设置为aa以显示无
例如

 <div class"aa" id="norway" >
norway is a nice country
</div>

第二步

所谓的标记，你可以使用html按钮为它设置css样式，使其美观。并给它一个值，例如挪威

第3步

Jquery看起来像这样

$("body").on('mouseover','.marker',function()

{

$('.aa').hide();

$("#"+this.value).show();

});

JQuery交互式地图

1 个答案: