Question

我的jQuery中存在一些逻辑问题，并且想知道是否有人可以帮助我吗？

我有一个使用asp对象和引导程序进行样式化的表单。这些物体具有固定的位置，但是它们是隐藏的，我正在使用按钮来隐藏与它们相关的井（当然还有它们自己）。我所拥有的作品非常适用于只有一个物体附着在它们身上的水井，但是它的倍数使它变得有点忙乱;以下是我的工作：

        $('#btn_IncCat').click(function () {
            $('#btn_Cat').toggleClass('btn-primary btn-success'); <<button colour change on click
            $('#Search').toggleClass('well hidden well'); <<the asp object wrapped in a div
            $('#searchh5').toggleClass('hidden');

        })

对于其中有多个物体的井，我正在努力解决这个问题：

     $('#btn_Area').click(function () {
            $('#btn_Area').toggleClass('btn-primary btn-success');

            if (counter = 0 && $('#MobSelection').hasClass('well hidden')) { counter = 1 } else { counter = 0 };
            if (counter = 0 && $('#MobSelection').hasClass('well')) { counter = 0 } else { counter = 1 };
            if (counter = 1) { $('#MobSelection').toggleClass('well hidden well'); };

            $('#AreaCol').toggleClass('col-md-3 hidden col-md-3') ;
            if ($('#MobSelectioh5').hasClass('hidden')) { $('#MobSelectioh5').toggleClass('hidden') } else { };

        })

一般的想法是用户会单击所需的按钮，并且相关的asp对象将出现在井中。但是井保持隐藏或者对象没有显示，或者我必须单击上一个按钮才能显示所需对象。

我有点沮丧我已经设法让这个与updatepanels一起使用它现在只是最后一个障碍。

如果有人能指出我正确的方向，我们将不胜感激！

P.S：可能值得一提的是剧本以：

开头

$(document).ready(function () {

        var counter = 0;

这是HTML示例：

        <div id="MobSelection" class="well hidden">
            <div class="form-inline" role="form">
                <asp:UpdatePanel ID="IncidentMobPanel" runat="server">
                    <ContentTemplate>
                        <script type="text/javascript">
                            Sys.Application.add_load(BindIncidentEvents);
                        </script>

                        <div class="row">

                        <div class="col-md-2 hidden" id="watchCol">
                        <asp:Label ID="lbl_WatchSearch" runat="server" Text="Watch:"></asp:Label>

                                        <asp:DropDownList ID="DD_WatchSearch" runat="server" DataSourceID="Watch" CssClass="btn btn-default"
                                            DataTextField="WatchDesc" DataValueField="WatchDesc" AutoPostBack="True" AppendDataBoundItems="true" EnableViewState="false" OnSelectedIndexChanged="DD_area_SelectedIndexChanged">
                                            <asp:ListItem Value="0">Select Watch:</asp:ListItem>
                                        </asp:DropDownList>
                                        <asp:SqlDataSource ID="Watch" runat="server" ConnectionString="<%$ ConnectionStrings:constr %>"
                                            SelectCommand="SELECT DISTINCT  FROM ] where WatchDesc is not null"></asp:SqlDataSource>
                                    </div>

                                    div class="col-md-2 hidden" id="Pumpscol">
                                <asp:Label ID="lbl_NumberofPumpsSearch" runat="server" Text="Number of Pumps:"></asp:Label>
                                <asp:DropDownList ID="dd_NumberofPumpsSearch" runat="server" AutoPostBack="True" CssClass="btn btn-default">
                                    <asp:ListItem Value="0">Number of Pumps:</asp:ListItem>
                                    <asp:ListItem Value="1">1</asp:ListItem>
                                    <asp:ListItem Value="2">2-3</asp:ListItem>
                                    <asp:ListItem Value="3">3-4</asp:ListItem>
                                    <asp:ListItem Value="4">5-6</asp:ListItem>
                                    <asp:ListItem Value="5">7-8</asp:ListItem>
                                    <asp:ListItem Value="6">9+</asp:ListItem>
                                </asp:DropDownList>
                            </div>
                        </div>
                          </ContentTemplate>
                            </asp:UpdatePanel>


                        </div>

Answer 1

我用$ .toggleClass使条件变得复杂，所以我把它改为：

 $('#btn_Area').click(function () {
            $('#btn_Area').toggleClass('btn-primary btn-success');
            if ($('#MobSelection').hasClass('well hidden')) { $('#MobSelection').removeClass('hidden') };
            $('#AreaCol').toggleClass('col-md-3 hidden col-md-3') ;
            if ($('#MobSelectioh5').hasClass('hidden')) { $('#MobSelectioh5').removeClass('hidden') } else { };

        })

感谢@Anton Boritskiy

隐藏和取消隐藏asp对象的jQuery逻辑问题

1 个答案: