制作有关在jQuery中创建的列表的模态显示信息

Question

我正在尝试使用Bootstrap创建一个模式，以显示有关特定口袋妖怪（列表）的信息。我尝试用HTML创建模式，但无法从jQuery中获取信息。

问题出在眼前，我已经用Bootstrap创建了一个li，其他所有我都无法使我的Bootstrap模版正常工作并显示每个神奇宝贝的信息。

var pokemonRepository = (function() {
  var repository = [];
  var apiUrl = 'https://pokeapi.co/api/v2/pokemon/?limit=150';

  function loadList() {
    return $.ajax(apiUrl).then(function(response) {
      response.results.forEach(function(item) {
        var pokemon = {
          name: item.name,
          detailsUrl: item.url,
        };
        add(pokemon);
      });
    }).catch(function(e) {
      console.error(e);
    });
  }

  function loadDetails(item) {
    return $.ajax(item.detailsUrl).then(function(response) {
      item.imageUrl = response.sprites.front_default;
      item.height = response.height;
      item.types = response.types.map(function(item) {
        return ' ' + item.type.name;
      });

      item.ability = response.abilities.map(function(item) {
        return ' ' + item.ability.name;
      });
    }).catch(function(e) {
      console.error(e);
    });
  }

  function add(pokemon) {
    repository.push(pokemon);
  }

  function getAll() {
    return repository;
  }
  return {
    add: add,
    getAll: getAll,
    loadList: loadList,
    loadDetails: loadDetails
  };
})();

pokemonRepository.loadList().then(function() {
  pokemonRepository.getAll().forEach(function(pokemon) {
    addListItem(pokemon);
  });
});

var pokemonRepositoryNew = pokemonRepository.getAll();

/*function addListItem(pokemon){
  var $button = $('<button class="name-button">' + pokemon.name + '</button>');
}*/

function addListItem(pokemon) {
  var $button = $('<button type="button" class="btn btn-primary">' + pokemon.name + '</button>');
  var $li = $('<li class="list-group-item list-group-item-info"></li>');
  var $modal = $('<div class="modal-container"></div>');
  var $ul = $('<ul></ul>');
  $(".pokemon-list").append($li);
  $("#modal-container").append($modal);
  $ul.append($modal);
  $li.append($button);

  $button.on('click', function(event) {
    showDetails(pokemon)
  });
};

// Creating List and Buttons
$(pokemonRepositoryNew).each(function(pokemon) {
  addListItem(pokemon)
});

// Showing Modal with Picture / Height / Name
function showDetails(item) {
  pokemonRepository.loadDetails(item).then(function() {
    showModal(item);
  });
};

function showModal(item) {
  var $modalContainer = $('#modal-container');
  $modalContainer.show();
  $('#modal-container').html('');

  var modal = $('<div class="modal"></div>');
  var closeButtonElement = $('<button class="modal-close">Close</button>');
  var nameElement = $('<h1 class= "name">' + item.name + '</h1>');
  var imageElement = $('<img class="modal-image"></img>');
  imageElement.attr("src", item.imageUrl); //attribute set in jquery format

  var heightElement = $('<p>' + item.height + ' tall ' + '</p>');
  //wanted to add an if statment
  var typesElement = $('<p class = "types">' + 'types:' + item.types + '</p>');

  var modalContent = $('<div class = "modal-content">');
  //appending element to modal and modal to modal container
  modalContent.append(closeButtonElement).append(nameElement).append(imageElement).append(heightElement).append(typesElement);

  modal.append(modalContent);
  $modalContainer.append(modal).addClass('is-visible');

  closeButtonElement.on('click', function(event) {
    $modalContainer.hide()
  });

  //hide modal esc
  $(window).on('keydown', (e) => {
    if (e.key === 'Escape' && $('#modal-container').hasClass('is-visible')) {
      $modalContainer.hide();
    }
  });

  //outside click hide
  $('#modal-container').on('click', function(event) {
    if ($(event.target).is($modalContainer)) {
      $modalContainer.hide();
    }
  });
};