为什么我的div没有滑动?

时间:2013-11-05 22:08:15

标签: javascript jquery html asp.net css

为什么我的Div没有滑动?我做错了什么? 这是我的jquery细节。我指的是正确的网址还是我遇到问题的地方?

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">

 $(document).ready(function () {
     var $fieldRevItems = $("#dvDetails");
     $('#<%=btnClose2.ClientID %>').click(function (e) {
           $('#<%=txtSearch.ClientID %>').val('');
           $fieldRevItems.slideUp(600);
           e.preventDefault();
      });
  });
 </script>

这是我的html详细信息(这只是包含一个表的div)

<div id="dvDetails">
        <table id="tblDetails" width="30%" style="border: Solid 3px #D55500; height: 100%"
            cellpadding="0" cellspacing="0">
            <tr style="background-color: #D55500">
                <td colspan="2" style="height: 10%; color: White; font-weight: bold; font-size: larger" align="center">
                    User Details
                </td>
            </tr>
            <tr>
                <td align="right">
                    UserId:
                </td>
                <td>
                    <asp:Label ID="lblID" runat="server"></asp:Label>
                </td>
            </tr>
            <tr>
                <td align="right">
                    UserName:
                </td>
                <td>
                    <asp:Label ID="lblusername" runat="server"></asp:Label>
                </td>
            </tr>
            <tr>
                <td align="right">
                    FirstName:
                </td>
                <td>
                    <asp:TextBox ID="txtfname" runat="server" />
                </td>
            </tr>
            <tr>
                <td align="right">
                    LastName:
                </td>
                <td>
                    <asp:TextBox ID="txtlname" runat="server" />
                </td>
            </tr>
            <tr>
                <td align="right">
                    City:
                </td>
                <td>
                    <asp:TextBox ID="txtCity" runat="server" />
                </td>
            </tr>
            <tr>
                <td align="right" style="width: 100%">
                    Designation:
                </td>
                <td>
                    <asp:TextBox ID="txtDesg" runat="server" />
                </td>
            </tr>
            <tr>
                <td align="center" style="width: 100%">
                    <asp:Button ID="btnClose2" runat="server" Text="Close" />
                </td>
            </tr>
        </table>
    </div>

2 个答案:

答案 0 :(得分:1)

您的选择器似乎是个问题:$('#<%=btnClose2.ClientID %>')$('#<%=txtSearch.ClientID %>')。您是否能够根据这些选择器触发任何事件?

JavaScript中引用的选择器应该是输出源代码中显示的选择器。如果你试图将一个动态值从另一种语言传递到JS(就像你的代码似乎是这种情况),那么你需要将该值转换为JavaScript变量,以便在没有引号的情况下传递给jQuery,或者将JavaScript嵌入到另一种语言的模板文件中,然后将回显的输出直接连接为jQuery选择器。

简而言之,您将动态外观的代码作为字符串传递给jQuery,而不是传入有效的选择器。

答案 1 :(得分:1)

选择器很好。但是,你不需要使用$代替任何东西,你应该:

$(function () {
 var fieldRevItems = $("#dvDetails");
 $('#<%=btnClose2.ClientID %>').click(function (event) {
       event.preventDefault();
       $('#<%=txtSearch.ClientID %>').val('');
       fieldRevItems.slideUp(600);
  });
});