Question

我在下面有这个代码。我试图在复选框上单击2个展开的div将显示/隐藏。由于某种原因，函数被击中但他们没有隐藏/显示hte div。我把确切的代码放在jfiddle中，它工作正常。任何意见都非常感谢。

     <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="HorizontalSinglePageOptinSqueezePage2.ascx.cs" Inherits="UmbracoUsercontrols.HorizontalSinglePageOptinSqueezePage2" %>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js">

</script>
      <script type="text/javascript">   
            $(document).ready(function () {
                alert('test234123123');
                $("#assist").change(function () {
                    $("#expanded, #expanded2").toggle();
                    alert('test2343');
                });
            });
            function showhide() {
                alert('test');
                $("#expanded, #expanded2").toggle();
            }

    </script>      
       <!-- BASIC FORM --> 
    <div class="col-md-4">
                        <form role="form">
                          <div class="form-group">
                              <Asp:TextBox runat="server" class="form-control" type="text" id="name" placeholder="NAME"/>
                          </div>
                          <div class="form-group">
                              <Asp:TextBox runat="server" class="form-control" type="email" id="email" placeholder="EMAIL"/>
                          </div>

                <div class="assistance">I would like immediate assistance: <input type="checkbox" runat="server" id="assist" onclick="showhide();" /></div>

                <!-- EXPANDED FORM SECTION 1 -->
                <div style="display:none" runat="server" class="expanded" id="expanded">

                  <div class="form-group">
                    <asp:textbox runat="server" type="tel" class="form-control" id="phone" placeholder="PHONE"/>
                  </div>

                <p class="center">Please tell us about your situation and we'll see if we can help. We will also email you the <em>The 5 Easiest Ways to STOP Foreclosure in Under 48 Hours or Less</em>.</p>
                </div>
                <!-- END EXPANDED FORM SECTION 1 -->
                            </form></div>



                <div class="col-md-5">


                <!-- EXPANDED FORM SECTION 2 -->
                     <div runat="server" style="display:none" class="expanded" id="expanded2">

                     <div class="form-group">
                    <asp:label runat="server">Are you most interested in:</asp:label>
                     <asp:dropdownlist runat="server" id="interest" class="pull-right">
                        <asp:listitem value="Selling" Text="Selling"></asp:listitem>
                        <asp:listitem value="Refinancing" Text="Refinancing">
                        </asp:listitem>
                        <asp:listitem  value="Keeping" Text="Keeping"></asp:listitem>
                      </asp:dropdownlist>
                    </div>

                    <div class="form-group">
                    <Asp:Label runat="server" >Are you in foreclosure:</Asp:Label>
                      <asp:DropDownList runat="server" ID="foreclosure" OnChange="javascript:toggle();">
                                    <asp:ListItem Value="Yes" Text="Yes" />
                                    <asp:ListItem Selected="True" Value="No" Text="No" />
                                </asp:DropDownList>
                    </div>

                      <div class="form-group">
                      <asp:label runat="server">Your best guess, how much do you owe on:</asp:label><br />
                        <asp:label runat="server" >1st Mortgage:</asp:label>
                        <asp:textbox runat="server"  type="text" class="form-control" placeholder="Amount"/>
                      </div>
                      <div class="form-group">
                        <label>2nd Mortgage:</label>
                        <asp:textbox runat="server" type="text" class="form-control" placeholder="Amount"/>
                      </div>

                    <div class="form-group">
                    <asp:label runat="server" >Have you filed bankruptcy:</asp:label>
                      <asp:dropdownlist runat="server" ID="bankruptcy" class="pull-right">
                        <asp:listitem value="No" Text="No"></asp:listitem>
                        <asp:listitem value="Yes" Text="Yes"></asp:listitem>
                      </asp:dropdownlist>
                    </div>

                      <div class="form-group">
                      <asp:label runat="server" >Please describe your situation (briefly):</asp:label><br />
                        <asp:textbox runat="server" ID="situation" class="form-control"></asp:textbox>
                      </div>

                </div>
            <!-- END EXPANDED FORM SECTION -->              
                    <asp:button runat="server" id="button" name="button" type="submit" text="Get Your E-Book Now" class="btn btn-primary btn-lg trackMe" data-trackerid="optin" OnClick="submitButton_Click"></asp:button>
                <div class="center privacy">
                    <small>100% Privacy Guaranteed</small>
                </div>
                </div>

Answer 1

当ASP控件具有runat="server"时，它会为元素生成一个新的id，以便它可以将自己的JS处理程序绑定到新生成的id。我敢打赌，如果您在浏览器上检查该元素，其ID将不会是assist。如果您实际上没有进行服务器回调，请删除runat="server"。

Answer 2

将showhide()放入$(document).ready函数中。否则，在相应的输入元素被加载之前，您将分配切换效果。

$(document).ready(function () {
    $("#assist").change(function () {
                $("#expanded, #expanded2").toggle();
            });
    function showhide() {
            $("#expanded, #expanded2").toggle();
        }
    });

隐藏/显示div检查

2 个答案: