JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<button data-type='A'>Methode A</button>
<button data-type='B'>Methode B</button>
<button data-type='C'>Methode C</button>
<button data-type='D'>Methode D</button>
<button data-type='E'>Methode E</button>

JavaScript

/**
 * Ready to rumble
 */
'use strict';
$(document).ready(function(){
    /**
     * Methoden definieren
     */
    var methods = {
        A: function(){
            alert('A tut nix..');
        },
        B: function(){
            alert('B auch nicht..');
        },
        C: function(){
            alert('C verschwindet!');
            this.hide();
        },
        D: function(){
            this.css({'background-color': 'red'});
        }
    };
    
    /**
     * Button Click-Event
     */
    $('button').on('click', function(){
        var self = $(this), fn = self.attr('data-type');
        if(typeof methods[fn] === 'function'){
            methods[fn].apply(self);
        } else{
            alert('Methode nicht definiert!');
        }
    });
});