Функция jQuery click () в цикле for показывает непредвиденное поведение - PullRequest
Новая
       41

Функция jQuery click () в цикле for показывает непредвиденное поведение

3 голосов
/ 01 ноября 2010

Я хотел бы использовать функцию click () jQuery внутри цикла for, чтобы сделать три HTML-элемента интерактивными. Я создал простой тестовый пример: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js" />
  <script type="text/javascript">
    $(window).load(function() {
      function loadContent(){
        var values = ['a','b','c'];
        for (var i = 0; i < values.length; ++i) {
          var id = values[i];
          alert(id);
          $('#' + id).click(function() {
            function2(id);
          });
        }
      }

      function function2(id) {
        // do some fancy stuff like...
        alert(id);
      }

      loadContent();
    });
  </script>
</head>
<body>
  <div id="map">
    <a id="a">a</a>
    <a id="b">b</a>
    <a id="c">c</a>
  </map>
</body>

Как вы можете видеть, я хотел бы отобразить символ «a», если я нажму на «a» (a), покажу «b», нажимая на «b», и так далее. К сожалению, символ «с» отображается при нажатии на «а». Другие события не инициируются. Я не вижу ошибки, которую совершаю.

Я не беспокоюсь, эффективен этот код или нет. Я просто хочу знать, почему click () не работает, как ожидалось в этом контексте. Заранее спасибо за любые подсказки или решение.

Ответы [ 5 ]

2 голосов
/ 01 ноября 2010

Каждый из созданных вами обработчиков "click" будет ссылаться на одну и ту же одну переменную "id". Вы заметите, что он меняется на каждой итерации цикла. Когда цикл будет завершен, он будет указывать на самый последний цикл.

Вам нужно настроить обработчики по-разному: 

    for (var i = 0; i < values.length; ++i) {
      var id = values[i];
      alert(id);
      $('#' + id).click((function(id) {
        return function() { function2(id); };
      })());
    }

Блок, созданный для вашего цикла for, не создает новую лексическую область, как это происходит в некоторых языках. В Javascript эта переменная "id" является локальной переменной для функции "loadContent". Каждый из обработчиков "click" в вашей версии ссылается на одну и ту же переменную.

0 голосов
/ 01 ноября 2010

У вас есть несколько вопросов здесь:

  • Все ваши атрибуты id установлены на id="a", поэтому вы каждый раз повторно привязываете первый элемент (это основная проблема с вашим обработчиком click). Установите второе значение на id="b", а третье на id="c".
  • <script> элементы не могут быть самозакрывающимися, наш jQuery требует исправления от /> до ></script>
  • </map> должно быть </div>
  • Вы повторно используете id для этой функции, но нет необходимости, что вы также можете использовать function2(this.id) как простейшее исправление для вашего случая.

Вы можете проверить обновленную / рабочую версию здесь .

0 голосов
/ 01 ноября 2010

Все ваши идентификаторы установлены на «а».Попробуйте установить свои идентификаторы в a, b, c

0 голосов
/ 01 ноября 2010

Идентификаторы тегов <a></a> в вашем примере все "a".

0 голосов
/ 01 ноября 2010

У вас есть 3 элемента с одинаковым идентификатором.Идентификатор должен быть уникальным.

...