anzeigen/ausgeblendet Arbeits inkonsistent auf einem JQuery imagemap

Question

Ich bin auf einem imagemap arbeiten, das nicht nur hallo beleuchtet ist, sondern tut auch ein Ein-/Ausblenden auf einem einig zusätzliche Informationen auf einer Drupal-Website:

http://dev-wateraid.pantheonsite.io/where-we-work

Wenn Sie den Mauszeiger über Länder wie Kanada halten, sehen Sie das DIV, aber wenn Sie über den USA schweben, wird das Gebiet hell erleuchtet, aber es wird nicht angezeigt - ähnlich wie in Sierra Leone, Südafrika, Großbritannien, Papua-Neuguinea und einige andere.

Der Code, den ich mit der Show verstecken zu tun ist:

$('area').on({ 
    mouseover : function(e){ 
    var $this = $(this), 
    $office = $('#'+$this.prop('alt')); 
    $($office).removeClass("hidden"); 
}, 
    mouseout : function(e){ 
    var $this = $(this), 
    $office = $('#'+$this.prop('alt')); 
    $($office).addClass("hidden"); 
} 
}); 

Das Bild Karte hält die ALT-Tag, die dann zu zeigen, verwendet wird/verstecken ein div:

<area coords="96,67,97,61,76,40,69,45,55,36,55,-20,-4,-31,-40,-15,-41,-12,-20,0,-23,3,-31,2,-31,-1,-47,5,-39,11,-27,11,-20,9,-19,16,-29,21,-33,19,-39,29,-35,33,-37,36,-29,40,-25,38,-23,41,-23,46,-17,44,-12,47,-5,45,-7,52,-35,68,-33,69,-14,61,9,45,5,43,16,32,14,43,29,38,30,34,34,33,45,38,58,40,59,40,60,41,71,48,79,59,81,57,87,67,90,66" shape="poly" href="/" alt="United States"> 

Diese ist das div, das umgeschaltet werden würde, um mit den Informationen der Vereinigten Staaten angezeigt zu werden.

<table class="hidden" id="United States"> 
<tbody><tr valign="top"> 
<td> 
<a href="/countries/united-states"><img width="64" height="64" alt=""  src="http://dev-wateraid.pantheonsite.io/sites/default/files/flags/United-States.png" typeof="foaf:Image"></a> 
</td> 
<td> 
<h3>United States</h3> 
The America team helps to coordinate and fund operations across our country programs, with Nicaragua a particular focus. 
</td> 
</tr> 
</tbody></table> 

Ich halte aus Gründen suchen die meisten Ländern funktionieren könnte, aber andere nicht - Rechtschreibung stimmt - ich glaube nicht, es gibt keine versteckten Zeichen.

Ich habe den Code so gut wie möglich validiert, aber ich kann es nicht sehen.

Answer 1

jQuery-Selektor zum Beispiel nicht umgehen kann interpretiert werden als "#United States" ... Es ignoriert die "Staaten" ziemlich. Also, wenn Sie wirklich die ID zu sein „Vereinigte Staaten“ benötigen, können Sie verwenden:

$("[id='"+$this.attr('alt')+"']") 

Oder Sie können einfach die ‚alt‘ ändern und ‚id‘ auf „Unitedstates“.

Answer 2

Ich glaube, die Frage der Raum in dem "id",

id="United States" 

kann tatsächlich als

id="United"