1

みなさん、こんにちは。よろしくお願いします。そのため、過去2週間にわたってC＃を使用してasp.netを学習しており、かなりうまくいったように感じますが、jQueryの機能に問題があります。ドロップダウンリストを持つフォームを設定しようとしましたが、選択したオプションに応じて、別のアカウント作成フォームがパネル内に表示されます。次のコードを使用しました。

 <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/FrontEnd.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Login_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="CPMainContent" Runat="Server">
    <asp:DropDownList ID="AccountTypeDDL" runat="server" >
        <asp:ListItem>Resident Account</asp:ListItem>
        <asp:ListItem>Student Account</asp:ListItem>
        <asp:ListItem>University Account</asp:ListItem>
    </asp:DropDownList>

    <asp:Panel ID="CreateStudentAccountPanel" runat="server" >
        <asp:Label ID="Label1" runat="server" Text="Create Student Account"></asp:Label>
    </asp:Panel>

    <asp:Panel ID="CreateUniversityAccountPanel" runat="server">
        <asp:Label ID="Label2" runat="server" Text="Create University Account"></asp:Label>
    </asp:Panel>

    <asp:Panel ID="CreateResidentAccountPanel" runat="server">
        <asp:Label ID="Label3" runat="server" Text="Create Resident Account"></asp:Label>
    </asp:Panel>
</asp:Content>

<asp:Content ID="ScriptContent" ContentPlaceHolderID="CPClientScript" runat="server">
    <script type="text/javascript">


        $(function ()
        {
            alert('hi');
            //This hides all initial textboxes
            $('#CreateStudentAccountPanel').hide();
            $('#CreateUniversityAccountPanel').hide();
            $('#CreateResidentAccountPanel').hide();



            $('#AccountTypeDDL').change(function ()
            {
                //This saves some time by caching the jquery value
                var val = $(this).index.toString;
                //this hides any boxes that the previous selection might have left open
                $('Panel').hide();
                //This just opens the ones we want based off the selection
                switch (val)
                {
                    case '0':
                        $('#CreateResidentAccountPanel').show();
                        $('#CreateUniversityAccountPanel').hide();
                        $('#CreateStudentAccountPanel').hide();
                       break;
                    case '1':
                        $('#CreateStudentAccountPanel').show();
                        $('#CreateResidentAccountPanel').hide();
                        $('#CreateUniversityAccountPanel').hide();
                        break;
                    case '2':
                        $('#CreateUniversityAccountPanel').show();
                        $('#CreateStudentAccountPanel').hide();
                        $('#CreateResidentAccountPanel').hide();
                        break;

                }
            });

        });
    </script>
</asp:Content>

jQueryコードが選択されていないパネル内のテキストを非表示にできない理由を誰かに教えてもらえますか？迷っています。再度、感謝します。

申し訳ありませんが、その最後の投稿を台無しに編集します。

`code`
 var val = $('#<= AccountTypeDDL.ClientID %>').index;
                //this hides any boxes that the previous selection might have left open
                $('Panel').hide();
                //This just opens the ones we want based off the selection
                switch (val)
                {
                    case 0:
                        $('#<%= CreateResidentAccountPanel.ClientID %>').show();
                        $('#<%= CreateStudentAccountPanel.ClientID %>').hide();
                        $('#<%= CreateUniversityAccountPanel.ClientID %>').hide();
                       break;
                    case 1:
                        $('#<%= CreateResidentAccountPanel.ClientID %>').hide();
                        $('#<%= CreateStudentAccountPanel.ClientID %>').show();
                        $('#<%= CreateUniversityAccountPanel.ClientID %>').hide();
                        break;
                    case 2:
                        $('#<%= CreateResidentAccountPanel.ClientID %>').hide();
                        $('#<%= CreateStudentAccountPanel.ClientID %>').hide();
                        $('#<%= CreateUniversityAccountPanel.ClientID %>').show();
                        break;

code

4

3 に答える 3

2

使ってみましたかClientID

 $('#<%= CreateStudentAccountPanel.ClientID %>').hide();
 ....
于 2012-07-19T16:49:20.353 に答える
1

FireBugなどの優れたJavaScriptデバッガーにページをロードし、次の行を実行して、セクションの場合はコンソールを使用してページを非表示にしてみてください。

$('#CreateResidentAccountPanel').hide()

それでも問題が解決しない場合は、FireBugのhtmlインスペクターを使用して、パネルdivの実際のIDを確認してください。Asp.Netは、明示的に指定しない限り、独自のジャンクIDを追加する傾向があります。これを回避するClientIDMode="Static"には、パネルタグ定義に属性を追加します。

<asp:Panel ID="CreateResidentAccountPanel" ClientIDMode="Static" runat="server">
    <asp:Label ID="Label3" runat="server" Text="Create Resident Account"></asp:Label>
</asp:Panel>

私は通常、jQueryを介して操作することがわかっているすべてのIDに静的を使用します。これにより、作業がはるかに簡単になります。

于 2012-07-20T06:46:39.110 に答える
0

#<%= CreateUniversityAccountPanel.ClientID %> セレクターのようなものを使うべきだと思います。

于 2012-07-19T16:51:16.947 に答える