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"); 
}