Question

抱歉我的英语不好。

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

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

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

Answer 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/

Answer 2

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

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

可能你的问题是PHP输出，因为它与JavaScript不同。

例如，在所有情况下都改变：

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

要：

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

¹ 虽然您可以了解性能，分离和其他Web开发虫洞的详细信息。

Answer 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

Answer 4

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

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

4 个答案: