Create function for multiple elements id using For loop

Question

This is the html:

<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>

and this is the jQuery which show a popup on mouseover for single element (it works fine)

    <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>
});

but if i loop it for more elements then it does not works

<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

You need provide different scope for p.

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));
}

And another solution is to use the this.id for you situation.

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);
    });
}