javascript - <%= x.ClientID %> 在重复的用户控件中返回错误值

Question

我有一个 asp .net 用户控件，它在 html 模板中托管的一段 javascript 中包含 <%= myDiv.ClientID %>。

此控件在页面上放置了多次。问题是上面的语句总是返回页面上最后一个控件中的 div 的客户端 id。

我检查了 HTML，每个 div 都有自己唯一的 ID。

该控件的完整 HTML 是...

<script type="text/javascript">
    function ToggleHelpText() {
        try {

            var e = document.getElementById("<%= divHelpText.ClientID %>");

            if (e.style.display == 'block')
                e.style.display = 'none';
            else
                e.style.display = 'block';
        }
        catch (err) {
            alert(err);
        }
    }
</script>
<asp:LinkButton ID="Help" OnClientClick="ToggleHelpText(); return false;" CausesValidation="false"
    OnClick="btnHelp_Click" runat="server">Help</asp:LinkButton>
<div id="divHelpText" runat="server" visible="true" style="display: none">
</div>

可能是什么原因造成的？解决方法是什么？

谢谢

Answer 1

您的问题是您多次定义了函数ToggleHelpText。每个定义都有一个控件的 ID 硬编码到其中，并且您只剩下最后一个定义和最后一个 ID，因为它们会相互覆盖。

只需简单一步，将代码更改为

<script type="text/javascript">
 function ToggleHelpText(id) {
     try {
          var e = document.getElementById(id);
          if (e.style.display == 'block')
             e.style.display = 'none';
         else
             e.style.display = 'block';
     }
     catch (err) {
         alert(err);
     }
 }
</script>
<asp:LinkButton
  ID="Help"
  OnClientClick='ToggleHelpText(\'<%= divHelpText.ClientID %>\'); return false;'
  CausesValidation="false"
  OnClick="btnHelp_Click" runat="server">Help</asp:LinkButton>
<div id="divHelpText" runat="server" visible="true" style="display: none">
  </div> 

这将继续多次覆盖该函数，但现在 ID 本身不会被覆盖，因为它没有硬编码到函数中。

将来您可以弄清楚如何不多次定义该函数。

注意，我对 OnClientClick 中的引用有点不确定。如果不起作用，请尝试此操作

OnClientClick='ToggleHelpText(<%= "\"" + divHelpText.ClientID + "\""%>); return false;'

或者尝试在代码中设置它:

Help.OnClientClick =
    "ToggleHelpText('" +
    divHelpText.ClientID +
    "'); return false;";