Разница между интерпретацией цикла for в php и javascript - PullRequest
Новая
       2

Разница между интерпретацией цикла for в php и javascript

0 голосов
/ 17 августа 2011

извините за мой плохой английский.

У меня такой вопрос: почему первый код: 

<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» (что, на мой взгляд, должно происходить и в первом коде).

Как я могу исправить первоекод, чтобы он работал как второй?

Ответы [ 4 ]

3 голосов
/ 17 августа 2011

Пометьте все элементы анимации меню одним и тем же классом и сделайте следующее: 

$(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/

2 голосов
/ 17 августа 2011

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

2 голосов
/ 17 августа 2011

В конце это должно привести к тому же коду. 1

В первом примере это делается с помощью JavaScript (на стороне клиента), а во втором - с помощью PHP (на стороне сервера).

Вероятно, ваша проблема связана с выводом PHP, поскольку он отличается от JavaScript.

Например, во всех случаях изменить: 

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

Кому: 

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

1 Хотя вы можете подробно узнать о производительности, разделении и других «червоточинах» для веб-разработки.

1 голос
/ 17 августа 2011

Причина, по которой первый не работает как второй, заключается в том, что в Javascript вы формируете замыкание вокруг переменной j в своих обработчиках событий, и замыкания не оцениваются сразу.Таким образом, вы продолжаете изменять j каждую итерацию, но она не оценивается до тех пор, пока не сработают события, поэтому оцененное значение - это значение, установленное на последней итерации.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...