javascript/php for 循环不起作用？答案

【问题标题】：javascript/php for loop not working?javascript/php for 循环不起作用？
【发布时间】：2013-07-06 21:49:00
【问题描述】：

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

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

提前致谢

【问题讨论】：

至少提供错误信息
老兄，对我来说，代码看起来没有逻辑错误，但是代替 .hover 使用 .mouseover $('#test1'+i).mouseover (function(){...
将事件处理程序附加到upperBoxContainer 并使用jQuery 获取$i 的值会容易得多
请提供某种形式的错误信息，以便我们帮助调试代码。
谢谢大家！ Jonathan de M. 的解决方案删除了错误

标签： php jquery for-loop

【解决方案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')

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

【讨论】：

+1 没有意识到你必须在函数中包装这样的循环，但我想如果我使用 jquery 我不会做一个 for 循环所以从来没有遇到过这个问题