Q:

Convert a event handler in a function

I have the following code.
$('.crossOutAnswer').on('click', function(){
  var crossStatus = $(this).hasClass('alreadyCrossOutAnswer'),
      crossOutElement = $(this).attr('class').split(' ')[1].split('-')[1];
   if(crossStatus == 1){
     $(this).removeClass('alreadyCrossOutAnswer');
     $('.res' + crossOutElement).removeClass('CrossedOutQuestion');
  }else{
    $(this).addClass('alreadyCrossOutAnswer');
    $('.res' + crossOutElement).addClass('CrossedOutQuestion');
  }
})

It works OK, but what I'm trying to do is convert this in 2 functions

The first to do the first statement
The second to do the ELSE statement

The problem is that when I try to convert them as 2 functions, the $(this) stop working (for obvius reasons there is no trigger anymore).
Does anyone knows a best practice in how convert event handlers in functions?.
EDIT
Please note that I can pass the this parameter with no problems, but the variables get undefined then. So the solution must solve that issue WITHOUT redeclaring in the function

A:

You have two options:
First:
You can pass the this as parameter to the functions, like this:
if(crossStatus == 1){
    functionA(this);
}else{
    functionB(this);
}

And using it:
functionA(remoteThis){
    $(remoteThis).doSomething();
}

Second:
You can call those functions using apply() and passing this as a context, so that those functions will have the same this context, like this:
if(crossStatus == 1){
    functionA.apply(this);
}else{
    functionB.apply(this);
}

And using it:
functionA(){
    $(this).doSomething();
}

A:

This is the answer. In this way, you don't need to redeclare the variables and the 'this' works OK.
  $('.crossOutAnswer').on('click', function(){
      var crossStatus = $(this).hasClass('alreadyCrossOutAnswer'),
          crossOutElement = $(this).attr('class').split(' ')[1].split('-')[1];
       if(crossStatus == 1){ removeCrossOut(this, crossStatus, crossOutElement); }
       else{ addCrossOut(this, crossStatus, crossOutElement); }
    })

    function removeCrossOut(elem, crossStatus, crossOutElement){
        $(elem).removeClass('alreadyCrossOutAnswer');
        $('.res' + crossOutElement).removeClass('CrossedOutQuestion');
    }

    function addCrossOut(elem, crossStatus, crossOutElement){
        $(elem).addClass('alreadyCrossOutAnswer');
        $('.res' + crossOutElement).addClass('CrossedOutQuestion');
    }

