Different way of writing multiple click functions

  • I have the following .click() functions:



    $('.tab').click(function(){
    $('.tab').removeClass('activeTab');
    $(this).addClass('activeTab');
    });

    $('.edit').click(function(){
    $(this).hide();
    $(this).next().show();
    });

    $('.cancel').click(function(){
    $(this).parent().hide();
    $(this).parent().prev().show();
    });


    Is it possible to combine these functions doing something like this?



    Pseudocode:



    $.click(function(){
    for $('.tab'){
    //do this
    }
    for $('.edit'){
    //do this
    }
    for $('.cancel'){
    //do this
    }
    });


    HTML:



    <a href="javascript:void(0);" class="edit">Edit</a>
    <span class="controls">
    <a href="javascript:void(0);" class="cancel">Cancel</a> |
    <a href="javascript:void(0);" class="save">Save</a>
    </span>

  • Flambino

    Flambino Correct answer

    8 years ago

    First off, I'd rewrite the HTML to get rid of the javascript href attributes. I'd also use a data-action attribute for the action name. You can still use class to do the styling of course, but style is not behavior, so keep those things separate (i.e. the class might be action-button primary highlighted or something, but the action would still be save):



    <a href="#" data-action="edit">Edit</a>
    <span class="controls">
    <a href="#" data-action="cancel">Cancel</a> |
    <a href="#" data-action="save">Save</a>
    </span>


    Code-wise, what each link has in common is that they should preventDefault so the links aren't "followed" when clicked. So at the very least, we'll need this:



    $("a[data-action]").on("click", function (event) {
    event.preventDefault();
    });


    Then of course, there are the actions/behaviors themselves. I'd suggest putting the logic for each in an object, and expanding the generic click handler like so:



    var actions = {
    edit: function (event) { ... },
    cancel: function (event) { ... },
    save: function (event) { ... }
    };

    $("a[data-action]").on("click", function (event) {
    var link = $(this),
    action = link.data("action");

    event.preventDefault();

    // If there's an action with the given name, call it
    if( typeof actions[action] === "function" ) {
    actions[action].call(this, event);
    }
    });


    Now you have a generic click handler, and an easily extensible list of actions. The action functions themselves behave exactly like normal jQuery event handlers (i.e. this will refer to the link clicked, and the first argument will be the event).


    *slowclap* this was the answer I said japanFour should wait for!

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM