javascript/php for loop not working?

Question

My phpcode is

<?php for($i = 1; $i < 5; $i++) { ?>
  <div class="upperBoxContainer" id="test1<?php echo $i; ?>"> 
    <a href="#"><img id="test<?php echo $i; ?>" src="images/midimages/<?php echo $i; ?>.jpg"></a>
  </div>
<?php } ?>

And my javascript code is

jQuery(document).ready(function() {
    for (var i = 1; i < 5; i++) {
        alert('images/midimageshover/' + i + '.jpg');
        $('#test1' + i).hover(function() {
            $('#test' + i).attr('src', 'images/midimageshover/' + i + '.jpg');
        });
        $('#test1' + i).mouseout(function() {
            $('#test' + i).attr('src', 'images/midimages/' + i + '.jpg');
        });
    }
});

There is some error due to this code is not work. can you please find this.

Thanks in advance

dude, for me the code looks no logical errors, but in place of .hover use .mouseover $('#test1'+i).mouseover (function(){... — RONE
– RONE, Commented Jul 9, 2013 at 10:22
It'd be much easier to just attach the event handler to the upperBoxContainer and grab the value of $i using jQuery — billyonecan
– billyonecan, Commented Jul 9, 2013 at 10:25
Please provide some form of error message so we can help debug the code. — Dave
– Dave, Commented Jul 9, 2013 at 10:34

Jonathan de M. · Accepted Answer · 2013-07-09 11:01:39Z

1

Enclose your events in a Immediately-Invoked Function Expression (IIFE)

jQuery(document).ready(function(){
  for (var i = 1; i < 5; i++) {  
    (function(i){
      $('#test1'+i).hover(function(){
        $('#test' + i).attr('src', 'images/midimageshover/' + i + '.jpg');
      });
      $('#test1'+i).mouseout(function(){
        $('#test' + i).attr('src', 'images/midimages/' + i + '.jpg');
      });
    })(i);
  }
});

Your code is rewriting the value of $('#test1'+i) until it reaches 4, so at the end of the loop you'll only have $('#test14').

The code above create different scope by using the IIFE hence $('#test1'+i) won't be overwritten, instead you'll have $('#test11'), $('#test12'), $('#test13'), $('#test14')

Here is a demo to demonstrate the difference with your initial code

edited Jul 9, 2013 at 11:01

answered Jul 9, 2013 at 10:26

Jonathan de M.

9,8488 gold badges50 silver badges72 bronze badges

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

1 Comment

Pete Over a year ago

+1 didn't realise you had to wrap a loop like that in a function, but I guess if I'm using jquery I wouldn't have done a for loop so have never come across this problem

Collectives™ on Stack Overflow

javascript/php for loop not working?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related