显示/隐藏在一个jQuery图像映射

我工作的图像映射，不仅是高效照明不一致的工作，而且也确实在一些附加信息的显示/隐藏在Drupal站点：显示/隐藏在一个jQuery图像映射

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

如果你把鼠标悬停在加拿大这样的国家上，你会看到DIV显示，但是如果你在美国悬停，这个区域是高亮显示的，但它不会触发显示/隐藏 - 与塞拉利昂类似，南非，英国，巴布亚新几内亚和其他一些国家。

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

$('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标签，然后将其用于显示/隐藏一个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">

这是将被切换为与美国信息一起展示的分区。

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

我一直在寻找原因大多数国家可能会奏效，但别人不会 - 拼写是一致的 - 我不相信有任何隐藏字符。

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

来源

2016-07-05 etopolos

jQuery选择不能处理“#United国” ......它几乎无视“国家”。所以，如果你真的需要的ID是“美国”，您可以使用：

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

或者，你可以改变的“ALT”和“ID”到“UnitedStates的买家”。

来源

2016-07-06 00:09:23 Pimptech

非常感谢！ – etopolos

我认为，问题可能是出在“ID”的空间，例如

id="United States"

实际上可能被解释为

id="United"

来源

2016-07-06 00:05:06 Quinn

感谢您的帮助！ – etopolos

显示/隐藏在一个jQuery图像映射

回答

相关问题