jquery - 当多个图像映射位于同一页面上时，如何使用 jQuery 定位单个图像映射区域

Question

我在一个页面上有三个图像 map ，并且想要为每个 map 选择区域。

map 1 HTML

<img src="map1.jpg" width="100" height="10" border="0" usemap="#Map1" />
<map name="Map1" id="Map1">
  <area shape="rect" coords="609,235,834,335" href="test1.htm" class="fancybox" rel="iframe"/>
</map>

map 2 HTML

<img src="map2.jpg" width="100" height="10" border="0" usemap="#Map2" />
<map name="Map2" id="Map2">
  <area shape="rect" coords="609,235,834,335" href="test2.htm" class="fancybox" rel="iframe"/>
</map>

map 3 HTML

<img src="map3.jpg" width="100" height="10" border="0" usemap="#Map3" />
<map name="Map3" id="Map3">
  <area shape="rect" coords="609,235,834,335" href="test3.htm" class="fancybox" rel="iframe"/>
</map>

我尝试过这些选择器:

$('#Map1 > area.fancybox') // function 
$('map > #Map1 > area.fancybox') // function 

Answer 1

您的第一个选择器对于定位特定 map 是准确的:

• Fiddle

如果您想选择任何区域，您只需使用:

$('area');