Question

我的phpcode是

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

我的javascript代码是

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

由于此代码无效，因此存在一些错误。你能找到这个。

提前致谢

Answer 1

将您的事件包含在立即调用的函数表达式（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);
  }
});

您的代码正在重写$('#test1'+i)的值，直到它达到4，因此在循环结束时您将只有$('#test14')。

上面的代码通过使用IIFE创建了不同的范围，因此$('#test1'+i)不会被覆盖，而是您将拥有$('#test11')，$('#test12')，$('#test13')，{{ 1}}

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

javascript / php for循环不起作用？

1 个答案: