0

我有 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>

什么可能导致这种情况以及解决方法是什么？

谢谢

4

2 回答 2

3

您的问题是您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;";
于 2012-09-20T12:36:18.473 回答
0

一种解决方法可以是

<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() 存在跨浏览器兼容性问题。

于 2012-09-20T12:52:13.927 回答