Show/hide 在 Jquery 图像映射上工作不一致

Question

我正在制作一个图像地图，它不仅是高亮的，而且还在 Drupal 站点上的一些附加信息上做 show/hide：

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

如果您将鼠标悬停在加拿大等国家/地区上方，您会看到 DIV 出现，但如果您将鼠标悬停在美国上方，该区域会高亮显示，但不会触发 show/hide -- 与塞拉利昂、南非、英国、巴布亚新几内亚和其他一些国家类似。

我用来显示隐藏的代码是：

$('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");
}
});

图像映射包含 alt 标签，然后用于 show/hide a 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">

这是将切换为与美国信息一起显示的 div。

<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>

我一直在寻找大多数国家/地区可能适用但其他国家/地区不适用的原因 -- 拼写是一致的 -- 我不相信有任何隐藏字符。

我已经尽可能多地验证了代码，但我就是看不到它。

Answer 1

我认为问题可能出在 "id" 中的 space，例如

id="United States"

实际上可能被解释为

id="United"

Answer 2

jQuery 选择器无法处理“#United States”...它几乎忽略了 "States"。所以如果你真的需要ID是"United States"你可以使用：

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

或者您可以将 'alt' 和 'id' 更改为 "UnitedStates"。

Show/hide 在 Jquery 图像映射上工作不一致

Show/hide working inconsistently on a Jquery imagemap

javascript

jquery

drupal

imagemap