これはHTMLであるループ

Question

ために使用して、複数の要素IDの関数を作成します（これは正常に動作します）

<map name="Map" id="Map"> 
<area id="1" shape="poly" coords="604,140,657,140,677,160,677,234,605,234" /> 
<area id="2" shape="poly" coords="541,141,593,141,593,207,541,207" /> 
<area id="3" shape="poly" coords="436,141,486,141,486,207,436,206" /> 
<area id="4" shape="poly" coords="163,148,163,170,159,170" /> 
<area id="5" shape="poly" coords="163,207,153,207,159,173,163,173" /> 
</map> 
<div id="pop-up1">Area 1</div> 
<div id="pop-up2">Area 2</div> 
<div id="pop-up3">Area 3</div> 
<div id="pop-up4">Area 4</div> 
<div id="pop-up5">Area 5</div> 

、これは単一要素のマウスオーバーでポップアップを表示jQueryのある

<style> 
    div#pop-up1{ 
     display: none; 
     position: absolute; 
     width: auto; 
     padding: 10px; 
     background: #eeeeee; 
     color: #000000; 
     border: 1px solid #1a1a1a; 
     font-size: 90%; 
    } 
    </style> 
    <script> 
$(function() { 
    var moveLeft = 20; 
    var moveDown = 10; 
    $('area#1').hover(function(e) { 
      $('div#pop-up1').show(); 
      //.css('top', e.pageY + moveDown) 
      //.css('left', e.pageX + moveLeft) 
      //.appendTo('body'); 
     }, function() { 
      $('div#pop-up1').hide(); 
     }); 

     $('area#1').mousemove(function(e) { 
      $("div#pop-up1").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft); 
     }); 
    </script> 
}); 

をしかし、それ以上の要素のためにそれをループする場合、それは動作しません

<script type="text/javascript"> 
    $(function() { 
    var moveLeft = 20; 
    var moveDown = 10; 

for(var p=1; p<3; p++){ 
     $("area#"+p).hover(function(e) { 
      $("div#pop-up"+p).show(); 
      //.css('top', e.pageY + moveDown) 
      //.css('left', e.pageX + moveLeft) 
      //.appendTo('body'); 
     }, function() { 
      $("div#pop-up"+p).hide(); 
     }); 

     $("area#"+p).mousemove(function(e) { 
      $("div#pop-up"+p).css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft); 
     }); 
    } 
    }); 
</script> 

Answer 1

の異なる範囲を提供する必要があります。

for (var p = 1; p < 3; p++) { 
    (function (p) { 
     $("area#" + p).hover(function (e) { 
      $("div#pop-up" + p).show(); 
     }, function() { 
      $("div#pop-up" + p).hide(); 
     }); 

     $("area#" + p).mousemove(function (e) { 
      $("div#pop-up" + p).css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft); 
     }); 
    }(p)); 
} 

、別の解決策は、あなたの状況にthis.idを使用することです。

for (var p = 1; p < 3; p++) { 
    $("area#" + p).hover(function (e) { 
     $("div#pop-up" + this.id).show(); 
    }, function() { 
     $("div#pop-up" + this.id).hide(); 
    }); 

    $("area#" + p).mousemove(function (e) { 
     $("div#pop-up" + this.id).css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft); 
    }); 
}