Преобразование обработчика событий в функцию

Question

У меня есть следующий код.

$('.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'); 
    } 
}) 

Это хорошо работает, но то, что я пытаюсь сделать, это преобразовать это в 2-х функций

1. Первое сделать первое заявление
2. Предпоследняя сделать заявление ELSE

Проблема в том, что когда я пытаюсь преобразовать их в 2 функции, функция $ (this) перестает работать (по причинам obvius больше нет триггера).

Кто-нибудь знает, как лучше всего использовать обработчики событий в функциях ?.

EDIT

Пожалуйста, обратите внимание, что я могу передать этот параметр без проблем, но переменные получить неопределенное то. Таким образом, решение должно решить эту проблему без повторного объявления в функции

Answer 1

Это ответ. Таким образом, вам не нужно переопределять переменные, и «это» работает нормально.

$('.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'); 
    } 

Answer 2

Передача ссылки на this должны сделать трюк ... если я не хватает чего-то

$('.crossOutAnswer').on('click', function(){ 
    var crossStatus = $(this).hasClass('alreadyCrossOutAnswer'), 
    crossOutElement = $(this).attr('class').split(' ')[1].split('-')[1]; 
    if(crossStatus == 1){ 
    method1(this,crossOutElement); 
    }else{ 
    method2(this,crossOutElement); 
    } 
}) 

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

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

Answer 3

У вас есть два варианта:

Первое:

Вы можете передать this в качестве параметра функции, например:

if(crossStatus == 1){ 
    functionA(this); 
}else{ 
    functionB(this); 
} 

И использовать его:

functionA(remoteThis){ 
    $(remoteThis).doSomething(); 
} 

Второе:

Вы можете вызвать эти функции с помощью apply() и передачи this как контекст, так что эти функции будут иметь одинаковые this контекст, например:

if(crossStatus == 1){ 
    functionA.apply(this); 
}else{ 
    functionB.apply(this); 
} 

И использовать его:

functionA(){ 
    $(this).doSomething(); 
} 

Answer 4

Вы решить вашу проблему, передавая ссылку на этот в качестве параметра:

function f1(myThis) { 
    $(myThis).removeClass('alreadyCrossOutAnswer'); 
    $('.res' + crossOutElement).removeClass('CrossedOutQuestion'); 
} 

function f2(myThis) { 
    $(myThis).addClass('alreadyCrossOutAnswer'); 
    $('.res' + crossOutElement).addClass('CrossedOutQuestion'); 
} 

$('.crossOutAnswer').on('click', function(){ 
    var crossStatus = $(this).hasClass('alreadyCrossOutAnswer'), 
    crossOutElement = $(this).attr('class').split(' ')[1].split('-')[1]; 

    if(crossStatus == 1){ 
     f1(this); 
    } else { 
     f2(this); 
    } 
});