JSFiddle - React, Tailwind, and code Playground

by Oleg Apostol

HTML

<button data-blah="Joe">Joe</button>
<button data-blah="Jannet">Jannet</button>
<button data-blah="Stan">Stan</button>
<button data-blah="Sara">Sara</button>
<!-- представим, что кнопок может быть больше -->

JavaScript

$('button').each(function(i, button) {
    $(button).on('click', onClick.bind(this, button.dataset.blah));
});
    
function onClick(blah, e) {
    var opts = params[blah];
    // 1) включить спиннер на кнопке
    // 2) запросить данные с параметрами, соответствующими кнопке
    // допустим, что ручки для всех кнопок совсем разные
    $.get(opts.handler, opts.params)
        .done(function(data) {
            // 3) выключить спиннер
            // 4) выпонить с полученными данными действие,
            // соответствующее нажатой кнопке 
            opts.callback(data);
       });
}
    
params = {
    Joe: {
        handler: '/echo/json/?q=joe',
        reqParams: { a:1, b:2 },
        callback: function(data) {
            // ...
        }
    },
    Jannet: {
        handler: '/echo/json/?q=jannet',
        reqParams: { c:2, d:8 },
        callback: function(data) {
            // ...
        }
    },
    Stan: {
        handler: '/echo/json/?q=stan',
        reqParams: { e:5, f:2 },
        callback: function(data) {
            // ...
        }
    },
    Sara: {
        handler: '/echo/json/?q=sara',
        reqParams: { g:1, h:3 },
        callback: function(data) {
            // ...
        }
    }
}