jQuery сделать переменную, содержащую идентификатор нажатой кнопки

Question

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

 var n = $('button').find(this.id);

$(document).ready(function(){
    $("#2").click(function(){
        $("#1").hide();
        $("#n").hide();
    });
    $("#2").click(function(){
        $("#3").show();
    });
});

</script>

Я пробовал тонныиз разных решений, но так как я не так хорош в jQuery, я не смог найти подходящее решение.

Буду признателен, если кто-нибудь покажет мне, что правильно, и как это работает.Большое спасибо!

Если вам нужна дополнительная информация, я буду завтра.

Answer 1

Вы можете установить data-attribute для каждой кнопки, а затем прослушать ваше все приложение для нажатия кнопки.Когда он обнаружен, вы можете получить значение data-action и выбрать, что делать, используя инструкцию switch.

<button data-action="start adventure">Start!</button>
<button data-action="pause game">Pause...</button>
<button data-action="quit">Quit.</button>

<script>
    $('body').on('click', 'button', function(e){
      var clicked_button = $(e.target); 
      var button_action = clicked_button.data('action');

      switch(button_action){
          case 'start adventure': {
              // do things
              alert('Lets start an adventure!');
              break; 
          }
          case 'pause game': {
              // do things
              alert('Game is paused.');
              break;
          }
          case 'quit': {
              // do things
              alert('Sorry to see you go!! :( '); 
              break;
          }
          default: {
              console.log('What do we do for this action?', button_action); 
          }
      }
  });
</script>

Часть атрибута data-attribute может быть любым словом, которое вы хотите.данные-действие, данные-вещь, данные-что угодно.Просто убедитесь, что в jQuery вы получите часть .data('attribute'), соответствующую выбранному вами слову.

JS Fiddle Exmaple