javascript - 使用 jQuery 处理下拉列表的更改事件

Question

我正在尝试处理 dropdrow 的更改事件，如下所示:

 <div>
    <select id="serviceLine">
      <option selected="selected">--Select Option--</option>
      <option>Integration</option>
      <option>BPM</option>
      <option>GWT</option>
      <option>Other</option>
    </select>
 </div>

现在，我想在用户选择选项“其他”时添加一个文本区域。jQuery 看起来像这样:

function otherHandler(){
       $(this).siblings("textarea").remove();
       if($(this).val()=="Other"){

              var textbox="<textarea rows='3'></textarea>";
              $(this).parent().append(textbox);
       }

}

$("#serviceLine").on("change",function(){otherHandler()});

这不起作用，因为在 otherHandler() $(this) 中包含整个窗口的引用，而不仅仅是保管箱。

但是，如果我将 jQuery 更改为这样，它就可以正常工作:-

function otherHandler(that){
       $(that).siblings("textarea").remove();
       if($(that).val()=="Other"){

              var textbox="<textarea id='slOther'rows='3'></textarea>";
              $(that).parent().append(textbox);
       }

}


$("#serviceLine").on("change",function(){otherHandler(this)});

我的问题是为什么它在第一种情况下不起作用，为什么我们必须显式传递引用？我在这里错过了一些重要的事情吗？

Answer 1

在第一种情况下，它不起作用，因为 this 是为事件处理程序定义的。

$("#serviceLine").on("change",function(){
    // this is accessible here in event handler not in the otherHandler function call
     otherHandler();
});

你应该直接传递函数的引用

$("#serviceLine").on("change", otherHandler);

如果您愿意，可以使用.apply(this)

function otherHandler(){
       $(this).siblings("textarea").remove();
       if($(this).val()=="Other"){

              var textbox="<textarea rows='3'></textarea>";
              $(this).parent().append(textbox);
       }

}

$("#serviceLine").on("change",function(){
   otherHandler.apply(this);
});