Different way of writing multiple click functions

Question

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>

Answer 1

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).

Answer 2

To answer your question directly: yes, it's possible to combine them into one function.

Is it advisable in the way you presented though? No.

I would argue that anytime there's a function with hard coded functionality controls, something is probably wrong.

Consider this for example:

function someHandler() {
    var $this = $(this);
    if ($this.hasClass('class-a')) {
        //do something specific to a
    }
    if ($this.hasClass('class-b')) {
        //do something specific to b
    }
    if ($this.hasClass('class-c')) {
        //do something specific to c
    }
}

$(".class-a, .class-b, .class-c").click(someHandler);

The easiest way to illustrate why this is a problem is to consider what happens if you want to reuse any of the specific functionalities.

How would you reuse the functionality in the //do something specific to a segment on something that doesn't have the class class-a without copying and pasting the code? You couldn't. (Well, not cleanly anyway.)

For this reason, it's good to try to separate functionalities and their bindings:

function someHandlerA() {
    //do something specific to a
}
function someHandlerB() {
    //do something specific to b
}
function someHandlerC() {
    //do something specific to b
}
$(".class-a").click(someHandlerA);
$(".class-b").click(someHandlerB);
$(".class-c").click(someHandlerC);

Now what if you want to reuse the functionality? It's easy: $("some selector").bind("some event", someHandler);

Obviously in large applications it becomes a lot more complex than this. There are of course times when it's ok to switch functionalities based on some condition. It's typically best to keep different functionalities as atomic as possible though. It relates back to the idea of separation of concerns. Each segment of code should do only one thing, even if that one thing is just dispatching to more than one thing.

Answer 3

I think you're looking for something along the lines of:

$('.tab, .edit, .cancel').click(function(){
    switch(this.className){
        case 'tab' : {
            $('.tab').removeClass('activeTab');
            $(this).addClass('activeTab');
        }break;
        case 'edit' : {
            $(this).hide();
            $(this).next().show();
        } break;
        case 'cancel' : {
            $(this).parent().hide();
            $(this).parent().prev().show();
        } break;
    }
});

Answer 4

I'm not sure about this but I think you can use your own manager in order to keep spaghetti code to a minimum.

Demo: http://jsfiddle.net/8C5wR/1/

function ClickManager(element) {
 this.el = $(element);
 this.check = function(){
   if (this.el.hasClass('class1')) {
    console.log('class 1 detected'); 
   }

   if (this.el.hasClass('class2')) {
    console.log('class 2 detected'); 
   }

   if (this.el.hasClass('class3')){
    console.log('class 3 detected'); 
   }
   };
}

(function(){
    $('.class1, .class2, .class3').on('click', function(){
      manager = new ClickManager(this);
      manager.check();
    });
})();​

Maybe others can weigh in to point out possible fallouts of this.