Question

我的asp .net用户控件有＆lt;％= myDiv.ClientID％＆gt;在html模板中托管的一段javascript中。

此控件多次放在页面上。问题是上面的语句总是返回页面上最后一个控件中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本身不会被覆盖，因为它没有硬编码到函数中。

将来你可以弄清楚如何不多次定义这个功能。

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

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

或尝试在代码中设置：

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

Answer 2

一个可以解决的问题

<script type="text/javascript">
 function ToggleHelpText(id) {
     try {
          var a = document.getElementById(id);
          var e = a.nextSibling();
         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(this.id); return false;'
  CausesValidation="false"
  OnClick="btnHelp_Click" runat="server">Help</asp:LinkButton>
<div id="divHelpText" runat="server" visible="true" style="display: none">
  </div>

如果您不介意使用Jquery，则可以更好地替代nextsibling（），因为nextsibling（）或nextElementSibling（）具有跨浏览器兼容性问题。

＆lt;％= x.ClientID％＆gt;在重复的用户控制中返回错误的值

2 个答案: