JSFiddle - React, Tailwind, and code Playground

by WILLIAM CORREA

HTML

<!-- usar jquery -->
<script src="http://code.jquery.com/jquery-git2.js"></script>

<!-- para o exemplo precisamos de um form -->
<form id="myform" method="POST">
    <input value="My Text"/>
</form>

<!-- precisamos tambem de um input para fazer o submit -->
<!-- type="button" exibe um input como um botao -->
<!-- value="Submit" o texto do botao -->
<!-- data-action="xxxx" marcacao no html que vai determinar o comportamento -->
<!-- data-value="xxxx" indica qual elemento recebera esses os comandos -->
<input type="button" value="Submit" data-action="submit" data-value="myform"/>
<input type="button" value="Hide" data-action="hide" data-value="myform"/>
<input type="button" value="Show" data-action="show" data-value="myform"/>
<input type="button" value="Toggle" data-action="toggle" data-value="myform"/>

JavaScript

/* esta chamada anonima limita o escopo para  o interpretador */
(function ($) {

  /* com este comando ON em DOCUMENT definimos que vamos observar os eventos de click em toda a página */
  $(document).on('click', function(e) {
    /* identificamos se o elemento clicado possui um 'data-action' */
    var action = $(e.target).attr('data-action');
    /* identificamos se o elemento clicado possui um 'data-value' */
    var value = $(e.target).attr('data-value');
    switch(action) {
      case 'submit':
        $('#' + value).submit();
        break;
      case 'hide':
        $('#' + value).hide();
        break;
      case 'show':
        $('#' + value).show();
        break;
      case 'toggle':
        $('#' + value).toggle();
        break;
      default:
    }
  });

})(jQuery);