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/

Answer 2

问题很简单：this不再是指你在调用函数时所期望的元素。

HTML：

<form>
    <select name="MetricType" id="MetricType" >
    <option value=CD>CD</option>
    <option value=HT>HT</option>
    <option value=Profile>Profile</option>
</select>
</form>

<div class="content" id="CD">CD</div>
<div class="content" id="HT">HT</div>
<div class="content" id="Profile">Profile</div>

脚本：

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

              }});
     });

CSS：

.content { display: none; }

JSFiddle demo here。

在旁注中，这是基于您发布的评论的JSFiddle。您错过了一个括号，从而创建了一个新问题。

请更新您的问题，因为这个答案在上下文中没有意义。 @Guffa实际上正确地回答了你的问题。

定义函数并在select语句中使用onchange而不是直接使用.change（function）

2 个答案: