javascript - 定义函数并在select语句中作为onchange使用，而不是直接使用.change(function)

Question

定义一个函数并在 select 语句中将其用作 onchange 而不是直接使用 .change(function) 有什么问题。

我想用它来显示不同的组合框:

     function MetricLayerShowHide (){           
            var type = $(this).val();
              if( type !==''){
                 $('.content').hide();
                 $('#'+type).show();
              }
      }


<select name="MetricType" id="MetricType" onchange="MetricLayerShowHide();" >
    <option value=CD>CD</option>
     <option value=HT>HT</option>
     <option value=Profile>Profile</option>
  </select>

   <div id="CD" style ="display: none" class ="content">
       <SELECT NAME="LayerList" id="layer1">
      </SELECT>
    </div>

代替

         $(function(){
        $('#MetricType').change(function(){
            var type = $(this).val();
              if( type !==''){
                 $('.content').hide();
                 $('#'+type).show();
              }
        });
     });

虽然这是有效的。

我哪里错了？

Answer 1

问题是当您调用该函数时，this 不再是元素。您在全局上下文中调用函数，因此 this 将是函数内的 window 对象。

您可以使用 call method以元素作为上下文调用函数:

onchange="MetricLayerShowHide.call(this);"

演示:http://jsfiddle.net/Guffa/co5ymkyk/