javascript - 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>

提前感谢您的任何见解。汤姆

Answer 1

好吧，让我们把它分成几部分，我假设ASP_SSRS在一个控件内，这就是为什么你有更多的开销。

当您直接调用时:

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

你有像正确的 client 元素...当你把你的方法远离那条线时，你完全失去了它们，换句话说，当 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');"

有了这样的值(value)观，你现在可以做很多事情了:

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