Show/hide 在 Jquery 图像映射上工作不一致
Show/hide working inconsistently on a Jquery imagemap
我正在制作一个图像地图,它不仅是高亮的,而且还在 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>
我一直在寻找大多数国家/地区可能适用但其他国家/地区不适用的原因 -- 拼写是一致的 -- 我不相信有任何隐藏字符。
我已经尽可能多地验证了代码,但我就是看不到它。
我认为问题可能出在 "id" 中的 space,例如
id="United States"
实际上可能被解释为
id="United"
jQuery 选择器无法处理“#United States”...它几乎忽略了 "States"。所以如果你真的需要ID是"United States"你可以使用:
$("[id='"+$this.attr('alt')+"']")
或者您可以将 'alt' 和 'id' 更改为 "UnitedStates"。
我正在制作一个图像地图,它不仅是高亮的,而且还在 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>
我一直在寻找大多数国家/地区可能适用但其他国家/地区不适用的原因 -- 拼写是一致的 -- 我不相信有任何隐藏字符。
我已经尽可能多地验证了代码,但我就是看不到它。
我认为问题可能出在 "id" 中的 space,例如
id="United States"
实际上可能被解释为
id="United"
jQuery 选择器无法处理“#United States”...它几乎忽略了 "States"。所以如果你真的需要ID是"United States"你可以使用:
$("[id='"+$this.attr('alt')+"']")
或者您可以将 'alt' 和 'id' 更改为 "UnitedStates"。