Блог

Главная - Вопросы по программированию - Добавьте событие щелчка в динамически создаваемые разделители внутри цикла, которые отображают всплывающее окно с различным текстом для каждого из них в Javascript

Добавьте событие щелчка в динамически создаваемые разделители внутри цикла, которые отображают всплывающее окно с различным текстом для каждого из них в Javascript

#javascript #jquery #while-loop #event-handling #click

Вопрос:

Чего я пытаюсь добиться, так это динамического создания кнопок с помощью javascript/jquery и прикрепления к ним события «щелчок», чтобы каждая кнопка отображала всплывающее окно с некоторым текстом внутри, который отличается для каждой итерации (данные берутся из массива). Однако я борюсь с передачей данных внутри функции «щелчок», потому что на данный момент сценарии возвращают только конечное значение var i внутри цикла или вообще никакого значения. Вот код:

       let heroStartingInventory = [];
      let heroStartingInventoryDescription = [];

        heroStartingInventory.push(itemList[0], itemList[2]);
        heroStartingInventoryDescription.push(itemListDescription[0], itemListDescription[2]);


      var i = 0;
      while(i < heroStartingInventory.length) {

        $('#chara-select-rightcol-content').append(
          '<div id="item-'  i   '" class="button">'  heroStartingInventory[i]  '</div>'
        );

          $(' #item-' i).on('click', function(){
            new popupWindow(heroStartingInventory[i], heroStartingInventoryDescription[i]);
          });
        i  ;
      }

с помощью этого всплывающего окна кода(heroStartingInventory[i], heroStartingInventoryDescription[i]); не показывает значения.
Если я изменю его только для целей тестирования во всплывающем окне(i, i);, каждая кнопка просто показывает последнее значение i (в данном случае 2) после разрыва цикла.

Спасибо за уделенное время!

Ответ №1:

Ура, я только что сам нашел решение. Я взял код внутри цикла в отдельной функции за его пределами. Вот код:

       function test(index){
        $('#chara-select-rightcol-content').append(
          '<div id="item-'  index   '" class="button">amp;#9750; '  heroStartingInventory[index]  '</div>'
        );

        $(' #item-' index).on('click', function(){
          new popupWindow(heroStartingInventory[index], heroStartingInventoryDescription[index]);
        });

      }

      while(i < heroStartingInventory.length) {

        test(i);
        i  ;
      }
Метки: ,