0

HTML テンプレートでホストされている JavaScript の一部に <%= myDiv.ClientID %> を持つ asp .net ユーザー コントロールがあります。

このコントロールは、ページに何度も配置されます。問題は、上記のステートメントがページの最後のコントロールにある 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複数回定義していることです。各定義には 1 つのコントロールの 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

1つの回避策が可能です

<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() または nextElementSibling() にはブラウザー間の互換性の問題があるため、nextsibling() の代わりに使用することをお勧めします。

于 2012-09-20T12:52:13.927 に答える