JavaScript变量范围问题

Question

我有一个简单的范围界定问题使我难以理解。

这是该代码的简单版本，但采用相同的原理。

function myFunction(){
  $('.selector_1, .selector_2').click(function(e){
    var $trgt = $(e.target);
    var myVAR;

    if ($trgt.is('.selector_1')){
      myVAR = 'selector_1';
    }

    if ($trgt.is('.selector_2')){
      myVAR = 'selector_2';
    }
    console.log(myVAR);
  }
}

问题是，如果用户单击selector_1 myVAR都会成功填充myVAR ，但是，第二个目标处理程序将始终将myVAR返回为未定义。

我假设这是一个编程的101类型的东西，但是我还没有找到一个简单的答案。

感谢您对此的关注！ 批评公开赞赏。

Answer 1

您的html可能是这样的：

<div class='selector_1'>HELLO</div>

<div class='selector_2'><span>HI THERE</span></div> 

因此，当您单击第二个时，您将得到未定义的，因为目标是跨度而不是选择器。

小提琴演示： http : //jsfiddle.net/maniator/M6fYf/

Answer 2

该代码应该工作。 也许e.target对于某些元素类型行为不正确？？？ 取而代之的e.target ，请尝试使用this

function myFunction(){
  $('.selector_1, .selector_2').click(function(e){
    var $trgt = $(this);
    var myVAR;

    if ($trgt.is('.selector_1')){
      myVAR = 'selector_1';
    }

    if ($trgt.is('.selector_2')){
      myVAR = 'selector_2';
    }
    console.log(myVAR);
  }
}