jquery - jquery不会在点击功能上将类更改为不可见

Question

我的网页中有一个部分将显示公司的股票报价、历史图表或最新的新闻稿。aspx 标记如下所示，为简洁起见，删除了一些标记。

<div id="StockQuote" class="invisible">
        <asp:UpdatePanel ID="updplStockQuote" runat="server">
            <ContentTemplate>                  
                <span class="stockpricefont"><i>Last Sale:</i><b id="lastsale" runat="server"></b></span>
                     &nbsp;<asp:Image ID="imgNetChangeArrow" runat="server" /><span class="otherstockinfofont"><b id="netchange" runat="server"></b></span>
                            <span class="stockpricefont"><i>Market Cap:</i></span><span class="otherstockinfofont"><b id="marketcap" runat="server"></b></span><br />
                <span class="otherstockinfofont2"><i>Net Change(%):</i>&nbsp;<asp:Image ID="imgNetChgPctArrow" runat="server" /> <b id="netchangepct" runat="server"> </b></span><br />
                <span class="otherstockinfofont2"><i>Open:</i><b id="priceopen" runat="server"></b></span><br />
                <span class="otherstockinfofont2"><i>High:</i><b id="pricehigh" runat="server"></b></span><br />
                <span class="otherstockinfofont2"><i>Low:</i><b id="pricelow" runat="server"></b></span><br />
                <span class="otherstockinfofont2"><i>Volume:</i><b id="pricevolume" runat="server"></b></span><br />
                <span class="otherstockinfofont2"><i>Prior Close:</i><b id="pricepriorclose" runat="server"></b></span><br />


            </ContentTemplate>
            <Triggers>
               <%-- <asp:AsyncPostBackTrigger/>--%>
            </Triggers>
        </asp:UpdatePanel>
    </div>

    <div id="StockChart" class="visible">
        <asp:UpdatePanel ID="updpnlStockChart" runat="server">
            <ContentTemplate>
                <%-- All the asp chart code is here--%>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="ddlChartTimeFrame" EventName="SelectedIndexChanged"/>
            </Triggers>
        </asp:UpdatePanel>
    </div>

这是脚本

 <script>
    $(function () {
        function aTagClick(event) {
            if ($(this).text() === "Stock Quote") {
                if ($('#StockQuote').hasClass('invisible')) {
                    $('#StockChart').toggleClass('invisible');
                    $('#StockQuote').toggleClass('visible');           

                } 
            } else if ($(this).text() === "Stock Chart") {
                if ($('#StockChart').hasClass('invisible')) {
                    $('#StockChart').toggleClass('visible');
                    $('#StockQuote').toggleClass('invisible');
                }
            }}           
        $('#a_stockqoute').click(aTagClick);
        $('#a_stockchart').click(aTagClick);
        $('#a_latestnews').click(aTagClick);
    });

这是CSS

.invisible { 显示：无；} .visible { 显示：块；}

页面打开，图表可见。如果我点击股票报价标签，报价会显示，但图表 div 不会像它应该的那样变得不可见。我错过了什么？单击股票图表标签现在将使图表消失。我对 jquery 有点陌生，但无法弄清楚为什么会这样

工作脚本

 function aTagClick(event) {
            if ($(this).text() === "Stock Quote") {
                if ($('#StockQuote').css('display') == 'none') {
                    $('#StockChart').hide();
                    $('#StockQuote').show();
                }
            } else if ($(this).text() === "Stock Chart") {
                if ($('#StockChart').css('display') == 'none') {
                    $('#StockChart').show();
                    $('#StockQuote').hide();
                }
            }}

Answer 1

看着这个：

if ($('#StockQuote').hasClass('invisible')) {
    $('#StockChart').toggleClass('invisible');
    $('#StockQuote').toggleClass('visible');
} 

我觉得我更喜欢它看起来像：

if ($('#StockQuote').css('display')=='none') {
    $('#StockChart').hide();
    $('#StockQuote').show();
} 

不过，我需要查看 JSFiddle 才能确定。

//追赶。

编辑以回应非常甜蜜的 Mangotastic

我认为这里的整个 JavaScript 代码可以缩短为：

$(function () {        
    $('#a_stockquote,a_stockchart').click(function(){ 
        $('#StockQuote,#StockChart').toggle(); 
    });
});

#a_stockqoute注意：我修复了to的拼写#a_stockquote。

同样，我需要一个 JSFiddle 来确定。

//追赶。