Когда форма нажата, покажите строку

Question

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

При нажатии любой кнопки появляется другая форма, и в DOM вводится строка, чтобы уведомить пользователя, какая форманажат.

Псевдокод:

<div id="notifier">
  <h1 class="text-center">
     <> SOMETHING SHOULD GO HERE<>

<script>
 $(document).ready(function(){
                $("#notifier").hide();  //hide the initial string since no form is pressed at the beginning
            $("#editForm1").hide(); //hides form1 since no button is pressed
            $("#editForm2").hide(); //hides form2 since no button is pressed


            $("#btn_1").click(function(e) {
                    //SOMETHING SHOULD GO HERE AS WELL
                    $("#editForm1").show(); 

При нажатии кнопки 1 форма 1 появляется в домене. Но я также хочу вставить строку «Form1» в div с id="notifier", чтобы пользователь знал, какая форма порождена.

Как мне это сделать?

Answer 1

• Используйте атрибут data-* для хранения целевого селектора: data-formshow="#form-1"
• Используйте класс CSS, чтобы скрыть ваши формы: .none { display: none; }
• Используйте jQuery для выбора вашегокнопки и формы
• Используйте jQuery .addClass() и .removeClass() для манипулирования .none классом
• Используйте .not() для исключения определенных элементов из коллекции:

jQuery($ => {

  const $notifier = $('#notifier');       // the <H1>
  const $buttons = $('[data-showform]');  // the <button>s
  const $forms = $('[id^="form-"]');      // the <form>s
  
  $buttons.on('click', function(ev) {
    ev.preventDefault();
    const sel = $(this).data('showform'); // Get the selector
    const txt = $(this).text();           // Get the text
    const $form = $(sel);                 // Get the form Element
    $forms.not($form).addClass('hide');   // Hide other forms
    $form.removeClass('hide');            // Show target form
    $notifier.text( txt );                // Preview button text into H1
  });
  
});

.hide { display: none; }

<h1 id="notifier">CLICK A BUTTON</h1>

<button type="button" data-showform="#form-1">FORM ONE</button>
<button type="button" data-showform="#form-2">FORM TWO</button>

<form id="form-1" class="hide">I'm form ONE</form>
<form id="form-2" class="hide">I'm form TWO</form>

<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>