javascript onchange中的代码和函数中的相同代码有什么区别？

Question

我是Javascript的新手。但我必须在我的一个项目中使用它。

我有一个选项卡式控件，用于设置页面上各种事件的隐藏控件的值（选项卡点击和下拉列表）。隐藏的控件被提供一个JSON字符串，并且单击一个按钮来执行一些服务器端代码并​​在页面控件中填充数据。

当我在隐藏输入的onchange事件中直接运行此代码时，行为与当我将JavaScript放入函数中时不同。

我需要把它拉出来，这样我才能在函数中做一些其他小事情，这些事情似乎对onchagne事件中的内联代码非常复杂。

以下是正常运行的代码。

<input type="hidden" id="<%= ASP_SSRS.ClientID %>_tracDatState" 
onchange="$('#<%= ASP_SSRS.ClientID %>').val(this.value); 
document.getElementById('<%= btnSendHiddenField.ClientID %>').click();" /> 

与本代码进行比较。其中有不同的影响。

<input type="hidden" id="<%= ASP_SSRS.ClientID %>_tracDatState" onchange="compareUnitValues(this.value)" /> 


    <script type ="text/javascript"> 
     function compareUnitValues(args) { 
      $('#<%= ASP_SSRS.ClientID %>').val(args);    
      document.getElementById('<%= btnSendHiddenField.ClientID %>').click(); 
     } 
    </script> 

在此先感谢您的任何见解。 Tom

Answer 1

好的，让我们按部分划分它，我假设ASP_SSRS在控制之内，这就是为什么你有更多的开销。

当您直接致电：

$('#<%= ASP_SSRS.ClientID %>').val(this.value); 
document.getElementById('<%= btnSendHiddenField.ClientID %>').click(); 

你像正确客户元素......当你把你的方法远离这条线，你失去他们完全，换句话说有，到ASP.NET呈现新方法时，它不知道ASP_SSRS和/或btnSendHiddenField。

唯一的办法就是将它们传递给它自己的方法。

，如果你写你的方法签名：

function compareUnitValues(elmt, value1, value2) 

你就可以，里面，要求它们的属性，并指定你想要的任何值，所以让我们把它包起来：

<input type="hidden" id="<%= ASP_SSRS.ClientID %>_tracDatState" 
     onchange="compareUnitValues(this.id, '<%= ASP_SSRS.ClientID %>', '<%= btnSendHiddenField.ClientID %>');" /> 

这样，你的输入<%= ASP_SSRS.ClientID %>_tracDatState为this - >this是关联的元素，在这种情况下，你调用的方法是<%= ASP_SSRS.ClientID %>_tracDatState元素。

在我们的案例中，通过传递ID以及，您会看到我们写javascript方法的时候！

<input type="hidden" id="<%= ASP_SSRS.ClientID %>_tracDatState" 
     onchange="compareValues('<%= ASP_SSRS.ClientID %>_tracDatState', '<%= ASP_SSRS.ClientID %>', '<%= btnSendHiddenField.ClientID %>');" /> 

你也传递正确的元素id的你要操作的元素，通过该行的ASP.NET渲染引擎知道究竟帽子ASP_SSRS和btnSendHiddenField。

你的方法调用，渲染后，看起来像：

onchange="compareValues('Ctrl001_ASP_SSRS_tracDatState', 'Ctrl001_ASP_SSRS', 'Ctrl001_btnSendHiddenField');" 

和女巫这样的值，你现在可以做很多：

function compareUnitValues(elemt, value1, value2) { 

    var state = $("#" + elemt), 
     ssrs = $("#" + value1), 
     btnSend = $("#" + value2); 

    // assign state value to ssrs 
    ssrs.val(state.val()); 

    // trigger the send button 
    btnSend.trigger("click"); 
}