jQuery交互式地圖

Question

這里的JQuery新手在制作JQuery解決方案時有些頭疼。

我正在嘗試制作一張互動世界地圖。 用戶可以將鼠標懸停在標記（地圖上的特定地點）上，這會使帶有名稱和有關該地點的信息的信息框淡入。 當我將光標留在標記上時，該框再次淡出。

下面的代碼是帶有國家/地區標記的挪威標記的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。 我知道我的ive display:none CSS中display:none它，所以當JQuery運行時，它會顯示一個新的.info_box以及“隱藏”的嗎？ 因為可能是addCLass ？

正如您在下圖中看到的那樣，上面帶有info_box的白色標記是正確的，但是我看不到為什么第二個info_box出現在右側？

我現在有些困惑，甚至卡住了，我似乎無法“得到它”。

任何幫助，技巧或竅門將得到普遍贊賞。

Answer 1

一旦要顯示的框具有唯一性，這應該不是問題。

第1步

創建您要在地圖中使用的所有div，並為他們提供相同的類名，但要使用不同的類名，我會將此類設置為不顯示
例如

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

第2步

所謂的標記，您可以使用html按鈕使用CSS對其進行樣式設置以使其美觀。 並給它一個值，例如挪威

第三步

jQuery看起來像這樣

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

{

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

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

});