1

我的PHP代码是

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

由于此代码不起作用，存在一些错误。你能找到这个吗？

提前致谢

4

1 回答 1

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'),$('#test14')

这是一个演示，用于演示与您的初始代码的区别

于 2013-07-09T10:26:52.710 回答