配列からインデックスを作成してjQueryで最初に開始するようにリクエストするにはどうすればよいですか？

Question

私はこのコードを使って、2つの異なるイメージマップシェイプの属性を識別します。私がしようとしているのは、2つの異なる形を取得して、タイトル属性を配列の先頭から索引付けすることです。

コード：

window.slideDetails = [ 

     //Slide1  
     "C1BP7: user information", 
     "FJAD7: user information", 
     "FFAD7: user information", 
     //Slide2 
     "C0AE7: user information", 
     "C7AZ7: user information", 
     "FJAE7: user information", 
     //Slide3 
     "C1AW7: user information", 
     "FJAP7: user information", 
     "FFAD7: user information" 

     ]; 
     $('area').each(function(index) { 
      var shape=$(this).attr('shape'); 
       if (shape == 'rect') { 
        $(this).attr("title", window.slideDetails[index]); 
       } 

       else if (shape == 'poly') { 
        $(this).attr("title", window.slideDetails[index]); 
       } 

    }); 

最初の3「ポリ」属性は、配列の最初の3つを取得するので、それがために、それらをインデックスだし、「RECT」であり、次の3つの属性が4-6を取得し、そうです。私はインデックス&配列については十分に分かりません。私はインデックスを間違って使用していると確信しています。

HTML

<img src="/images/testImage.jpg" width="1000" height="610" border="0" usemap="#Map1" /> 
<map name="Map1" id="Map1"> 
    <area shape="poly" coords="280,140,296,201,308,202,328,183,324,141,340,126,360,134,359,254,332,252,333,214,324,274,327,407,202,392,201,330,223,331,219,291,231,243,210,238,232,131,252,118" href="test1.htm" /> 
    <area shape="poly" coords="277,113,296,199,308,197,326,183,323,115,316,138,293,138" href="test2.htm" /> 
    <area shape="poly" coords="212,507,218,571,236,543,238,575,261,587,270,586,262,539,245,537,237,544,234,537,236,520,228,496,214,497" href="test3.htm" /> 
    <area shape="rect" coords="609,235,834,335" href="test1.htm" /> 
    <area shape="rect" coords="649,546,807,565" href="test2.htm" /> 
    <area shape="rect" coords="670,566,781,582" href="test3.htm" /> 
</map> 

RECTとポリ形状が画像の異なる部分ですが、それぞれの第一は、同じリンクに行くなど

Answer 1

問題は、あなたがそのループをやっているということですシェイプごとのインデックスではなく、領域ごとのインデックスを割り当てます。

代わりに、次の2つのループ（そのインデックスは形状の異なる種類にリセットされます）を使用し、あなたのselectorの一環として、形状属性を含めることができます。

$('area[shape="rect"]') 
    .each(function(index) { 
     $(this).attr("title", window.slideDetails[index]); 
    }); 

$('area[shape="poly"]') 
    .each(function(index) { 
     $(this).attr("title", window.slideDetails[index]); 
    }); 

このフィドルを参照してください：http://jsfiddle.net/mKc6T/