Question

我在一个页面上有多个图像映射，并且需要设置数组来为Google Analytics提供其标题属性。

虽然这有效，但它似乎不是正确的方法。我正在学习jQuery，并希望从我的错误和编写代码的正确方法中学习。

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="testa.htm" class="fancybox" rel="iframe"/>
  <area shape="rect" coords="609,235,834,335" href="testb.htm" class="fancybox" rel="iframe"/>
  <area shape="rect" coords="609,235,834,335" href="testc.htm" class="fancybox" rel="iframe"/>
  <area shape="rect" coords="609,235,834,335" href="testd.htm" class="fancybox" rel="iframe"/>
</map>

<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="testa.htm" class="fancybox" rel="iframe"/>
  <area shape="rect" coords="609,235,834,335" href="testb.htm" class="fancybox" rel="iframe"/>
  <area shape="rect" coords="609,235,834,335" href="testc.htm" class="fancybox" rel="iframe"/>
  <area shape="rect" coords="609,235,834,335" href="testd.htm" class="fancybox" rel="iframe"/>
</map>

<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="testa.htm" class="fancybox" rel="iframe"/>
  <area shape="rect" coords="609,235,834,335" href="testb.htm" class="fancybox" rel="iframe"/>
  <area shape="rect" coords="609,235,834,335" href="testc.htm" class="fancybox" rel="iframe"/>
  <area shape="rect" coords="609,235,834,335" href="testd.htm" class="fancybox" rel="iframe"/>
</map>

<img src="map4.jpg" width="100" height="10" border="0" usemap="#Map4" />
<map name="Map4" id="Map4">
  <area shape="rect" coords="609,235,834,335" href="testa.htm" class="fancybox" rel="iframe"/>
  <area shape="rect" coords="609,235,834,335" href="testb.htm" class="fancybox" rel="iframe"/>
  <area shape="rect" coords="609,235,834,335" href="testc.htm" class="fancybox" rel="iframe"/>
  <area shape="rect" coords="609,235,834,335" href="testd.htm" class="fancybox" rel="iframe"/>
</map>

jQuery的：

> var map1array = [ "test a",
>                   "test b",
>                   "test c",
>                   "test d"
>                  ]; 
> 
> var map2array = [ "test a2",
>                   "test b2",
>                   "test c2",
>                   "test d2"
>                 ]; 
> 
> var map3array = [ "test a3",
>                   "test b3",
>                   "test c3",
>                   "test d3"
>                 ]; 
> 
> var map4array = [ "test a4",
>                   "test b4",
>                   "test c4",
>                   "test d4"
>                 ]; 
    $('#Map1 > area').click(function(e) {$(this).attr('title', map1array[$(this).index()]);});
    $('#Map2 > area').click(function(e) {$(this).attr('title', map2array[$(this).index()]);});    
    $('#Map3 > area').click(function(e) {$(this).attr('title', map3array[$(this).index()]);});
    $('#Map4 > area').click(function(e) {$(this).attr('title', map4array[$(this).index()]);});

Answer 1

使用for循环，并将map1array更改为：

var map1array = [ "test a0",
                  "test b0",
                  "test c0",
                  "test d0"
                 ];

提示：迭代从0到3（包括）的数字。

如何使用jQuery正确地定位单个地图ID区域标题属性

1 个答案: