javascript - 如何在函数中使用 $(this) ？

Question

<select id="sel">
    <option id="1">aa</option>
    <option id="2">bb</option>
    <option id="3">cc</option>
</select>

<select id="two">
    <option id="1">aa</option>
    <option id="2">bb</option>
    <option id="3">cc</option>
</select>


function showalert(){
  alert($(this).find('option:selected').attr('id'));
}

$("#sel").change(function(){
   showalert();
});

$("#two").change(function(){
   showalert();
});

如何在这些函数中正确使用$(this)？现在 this 是 undefined.

Answer 1

你只需要重写你的两个 .change这样调用:

$("#sel").change(showalert);
$("#two").change(showalert);

无需“包装”对 showalert 的调用在另一个函数中 - 它已经是对函数的引用，jQuery 将确保 this设置为目标元素。

FWIW，这两个选择器甚至可以合并，因为它们具有相同的处理程序:

$("#sel,#two").change(showalert);

此外，你不应该使用 id就像你的<option>标签。 id标签在整个文档中应该是唯一的，直到 HTML5 甚至不允许是数字。

应该是value属性，或者如果您已经将其用于其他用途，则为 data-xxx属性。

将其保留为 id现在，你的处理程序就变成了

function showalert() {
    alert(this.options[this.selectedIndex].id);
}

基于使用的工作演示value在 http://jsfiddle.net/alnitak/54Pd9/