转换函数中的事件处理程序

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原因，不再有触发器）。

有谁知道如何在函数中转换事件处理程序的最佳实践？。

修改

请注意，我可以毫无问题地传递this参数，但变量将被取消定义。因此，解决方案必须解决该问题而不在函数中重新声明

Answer 1

您有两种选择：

<强> 第一：

您可以将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 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 作为参数传递给来解决您的问题：

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);
    }
});

Answer 4

这就是答案。通过这种方式，您不需要重新声明变量和“此变量”。工作正常。

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