在 php 和 javascript 中解释“for”循环之间的区别答案

【问题标题】：Difference between interpreting "for" loop in php and javascript在 php 和 javascript 中解释“for”循环之间的区别
【发布时间】：2011-10-29 03:28:19
【问题描述】：

抱歉我的英语不好。

我有这样一个问题：为什么是第一个代码：

<html>
  <head>
    <style>
      body { position: relative; }
      table { position: absolute; top: 200px; left: 200px; }
      div { width: 100px; height: 100px; background-color: black; margin: auto auto; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    $(document).ready(function(){
      for(i = 0; i < 100; i++) {
        var j = i + '';
        $("#menu_div_" + j).mouseover(function(){
          $("#menu_div_" + j).clearQueue();
          $("#menu_div_" + j).stop();
          $("#menu_div_" + j).animate({
            width: 150,
            height: 150
          }, 600
          );
        });
        $("#menu_div_" + j).mouseout(function(){
          $("#menu_div_" + j).clearQueue();
          $("#menu_div_" + j).stop();
          $("#menu_div_" + j).animate({
            width: 100,
            height: 100
          }, 600
          );
        });
      }
    });
    </script>
  </head>
  <body>
    <table id="menu">
<? for($i = 0; $i < 10; $i++) { ?>
      <tr>
<?   for($j = 0; $j < 10; $j++) { ?>
        <td>
          <div id="menu_div_<? echo ($i * 10) + $j; ?>">
          </div>
        </td>
<?   } ?>
      </tr>
<? } ?>
    </table>
  </body>
</html>

与此代码中的工作方式不同（“for”循环是用 php 编写的）：

<html>
  <head>
    <style>
      body { position: relative; }
      table { position: absolute; top: 200px; left: 200px; }
      div { width: 100px; height: 100px; background-color: black; margin: auto auto; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
      $(document).ready(function(){
<?php for($i = 0; $i < 100; $i++) { ?>
        $("#menu_div_" + <?php echo $i; ?>).mouseover(function(){
          $("#menu_div_" + <?php echo $i; ?>).clearQueue();
          $("#menu_div_" + <?php echo $i; ?>).stop();
          $("#menu_div_" + <?php echo $i; ?>).animate({
            width: 150,
            height: 150
          }, 600
          );
        });
        $("#menu_div_" + <?php echo $i; ?>).mouseout(function(){
          $("#menu_div_" + <?php echo $i; ?>).clearQueue();
          $("#menu_div_" + <?php echo $i; ?>).stop();
          $("#menu_div_" + <?php echo $i; ?>).animate({
            width: 100,
            height: 100
          }, 600
          );
        });
<?php } ?>
      });
    </script>
  </head>
  <body>
    <table id="menu">
    <? for($i = 0; $i < 10; $i++) { ?>
      <tr>
    <?   for($j = 0; $j < 10; $j++) { ?>
        <td>
          <div id="menu_div_<? echo ($i * 10) + $j; ?>">
          </div>
        </td>
    <?   } ?>
      </tr>
    <? } ?>
    </table>
  </body>
</html>

快速解释：

在第一个中，所有“div”标签中的“events”都会改变最后一个元素的大小（我不知道为什么）。在第二个中 - 每个“div”中的“事件”会导致相同“div”的大小发生变化（在我看来，第一个代码中也应该发生这种情况）。

如何更正第一个代码以使其像第二个一样工作？

【问题讨论】：

你有没有将静态 js 代码与 PHP 动态生成的代码进行比较？
您应该在 for 循环之前声明 var i;。此外，不需要var j = i + ''; $("#menu_div_" + i) 可以正常工作。
我不完全知道您所说的“比较”是什么意思，但我认为 - 是的。两个代码都应该有相同的想法。（我忘了补充说我只在一周内用 javascript 编程，所以比较可能是错误的。）

标签： php javascript jquery for-loop

【解决方案1】：

用相同的类标记所有动画菜单 div 并执行以下操作：

$(document).ready(function(){
  $('.animating_menu_div_class')
    .mouseover(function(){
      $(this).clearQueue()
         .stop()
         .animate({
            width: 150,
            height: 150
            }, 600);
     });
    .mouseout(function(){
      $(this).clearQueue()
         .stop()
         .animate({
            width: 100,
            height: 100
            }, 600);
     });
  }
});

这里，我重做了小提琴http://jsfiddle.net/dtanders/fAYhA/

【讨论】：

不幸的是，我在 opera 和 firefox 中尝试过，但它不起作用。
我最初粘贴了错误的代码 - 对此感到抱歉。当前的代码应该没问题。
+1 用于在事件处理程序中使用 this 并成为第一。

【解决方案2】：

第一个不像第二个那样工作的原因是，在 Javascript 中，您在事件处理程序中围绕变量 j 形成一个闭包，并且不会立即评估闭包。因此，您会在每次迭代中不断修改j，但直到事件触发后才会对其进行评估，因此评估值是上次迭代中设置的值。

【讨论】：

【解决方案3】：

j 并不等于您认为的那样。它会总是返回 99。这是由于在循环中定义了匿名函数。

幸运的是，借助一点 jQuery 魔法，这很容易解决。与其尝试直接引用每个元素$('#menu_div_'+j)，不如使用$(this)。在 jQuery 事件处理程序中，this 会自动设置为事件的元素/目标。

$(document).ready(function(){
  for(i = 0; i < 100; i++) {
    var j = i + '';
    $("#menu_div_" + j).mouseover(function(){
      $(this).clearQueue();
      $(this).stop();
      $(this).animate({
        width: 150,
        height: 150
      }, 600
      );
    });
    $("#menu_div_" + j).mouseout(function(){
      $(this).clearQueue();
      $(this).stop();
      $(this).animate({
        width: 100,
        height: 100
      }, 600
      );
    });
  }
});

JSFiddle Demo

【讨论】：

【解决方案4】：

最后，这个应该产生相同的代码。¹

第一个示例使用 JavaScript（客户端），第二个示例使用 PHP（服务器端）。

您的问题可能与 PHP 输出有关，因为它与 JavaScript 不同。

例如，在所有情况下都发生变化：

$("#menu_div_" + <?php echo $i; ?>)

收件人：

$("#menu_div_<?php echo $i; ?>")

¹虽然您可以深入了解性能、分离和其他 Web 开发虫洞的细节。

【讨论】：

但是第二个以我喜欢的方式工作。第一个做奇怪的想法。
@Tomasz 然后使用第一个:)
@Tomasz 第一个做奇怪的事情，因为它输出$("#menu_div_"1) 而不是$("#menu_div_1")。由于数字不是第一个字符串的一部分，jQuery 认为 id 是 #menu_div_ 而不是 #menu_div_1
问题在于在循环中定义匿名函数。在事件处理程序中，j == 99。 See this fiddle.
@Jason McCreary - :p 我只是想学习一些东西。关于javascript