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>

IDs should not start with a number according to spec. I want to make up some excuse like "IE wouldn't play well with them" but I really can't. — Oleg
– Oleg, Commented Mar 18, 2012 at 11:08

xdazz · Accepted Answer · 2012-03-18 10:38:55Z

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

edited Mar 18, 2012 at 10:38

answered Mar 18, 2012 at 10:31

xdazz

161k38 gold badges255 silver badges278 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

xdazz Over a year ago

@elclanrs No, that's won't work. After the loop, p is always 3 when the callback called.

xdazz Over a year ago

@gdoron It doesn't change anything, javascript doesn't have block scope, it only has function scope.

krizajb Over a year ago

For everyone else: this was solved here: stackoverflow.com/questions/7774636/…

Collectives™ on Stack Overflow

Create function for multiple elements id using For loop

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related