Кнопки jQuery - скрывать / показывать элементы или создавать и уничтожать динамические элементы? - PullRequest
Новая
       10

Кнопки jQuery - скрывать / показывать элементы или создавать и уничтожать динамические элементы?

0 голосов
/ 01 сентября 2018

Я строю простую боевую игру, которая позволяет пользователю выбрать 2 персонажей, дать им бой, а затем продолжить еще 2 раунда против других персонажей.

У меня есть разные кнопки с уникальными идентификаторами, встроенными в мой HTML для этапов игры, например, «PROCEED TO BATTLE», «FIGHT» и «NEXT ENEMY», и по мере выполнения сценария мой jQuery меняет свои назначения классов "hide" или "show" по мере необходимости.

Моя проблема заключается в следующем: в новом раунде, когда я вернусь к своей боевой функции (часть которой будет скрывать мою кнопку СЛЕДУЮЩИЙ ВРАГ и снова покажет мою кнопку БОЙ) и назначит слушателя для click, который влияет на По статистике HP / DP, эта операция начинает складываться и вести себя так, как будто нажатие на мою кнопку увольняет постоянно накапливающихся слушателей. Я уверен, что это так, но проверка приветствуется.

Так что мой вопрос о лучших практиках: Вместо того, чтобы скрывать / показывать мои элементы кнопок в зависимости от стадии игры, лучше ли мне определять эти элементы в моем Javascript как переменные и, надеюсь, создавать / уничтожать их вместе со слушателями событий, привязанными к ним, чтобы после возвращения у меня был свежий экземпляр кнопки динамического HTML и слушатель jQuery?

Возможно, мне не хватает ключевой терминологии, чтобы правильно найти это решение самостоятельно, поэтому любой ввод поможет!

Пример:

Допустим, я поместил это в свой HTML (хотя это, вероятно, кажется плохой практикой): 

<div class="row bottom_aux" id="bottom_aux">
      <a class="btn btn-light hide" id="progress_button">PROGRESS BUTTON</a>
      <a class="btn btn-light hide" id="battle_button">BATTLE BUTTON</a>
      <a class="btn btn-light hide" id="next_battle_button">NEXT BATTLE</a>
</div>

с настройкой класса hide visibility до none или display до hidden, я экспериментировал с обоими. Затем в моем jQuery я подниму свою кнопку с $(".battle_button").toggleClass(show) или $(".battle_button").addClass(show), но я не буду вдаваться в настройки CSS, которые я сделал, чтобы заставить ее появляться и исчезать, мне просто интересно, как это влияет на слушателя поведение.

Затем я показываю next_battle_button, затем назначаю слушателю его для действия, которое я настраиваю.

КОНТРАСТ С:

Установите мои кнопки как переменные в JavaScript: 

var $battle_button = "<a class='btn btn-light' id='battle_button'>BATTLE BUTTON</a>"
var $next_battle = "<a class='btn btn-light' id='next_battle_button'>NEXT BATTLE</a>"

затем, когда я вступаю в эту стадию, я тогда: 

$("#battle_button").remove(); // REMOVE BATTLE BUTTON
$("#bottom_aux").html($next_battle); // ADD NEXT FOE BUTTON
$("#next_battle_button").on("click", function() {
       game.nextFoe();
});

Надеюсь, эта иллюстрация поможет!

...