javascript - 当另一个切换器尚未切换回来时如何禁用一个切换器？

Question

我有一个带有 2 个按钮的图像:

<div class="panel">
    <div>
        <a class="a-button>Toggle A</a>
        <a class="b-button>Toggle B</a>
    </div>
    <p id="statics">Statics numbers</p>
   <p id='chart">Chart</p>
</div>
<div class="item-img"><img src="..."></div>

如果我想查看#statics，我单击一个按钮来隐藏 item-img。然后，再次单击以显示 img 并隐藏 #statics。

如果我想查看#chart，我单击b按钮隐藏item-img，然后再次单击以显示item-img并隐藏#chart。

jQuery(document).ready( function($) {
    $(".a-button").click(function () {
        $("#statics").toggle("slow");
        $(".item-img").toggle('slow');
        });
    $(".b-button").click(function () {
        $("#chart").toggle("slow");
        $(".item-img").toggle('slow');
        });
});

问题是 - 如果我通过切换器 a 按钮或 b 按钮隐藏 item-img，然后单击另一个切换器(a 或 b)，然后单击第一个切换器再次显示 item -img，两者#statics 和 #chart 出现，弄得一团糟。

当另一个切换器尚未切换回来时，如何禁用一个切换器？

Answer 1

jQuery(document).ready( function($) {
    $(".a-button").click(function () {
        if(!$("#chart").is(':visible')) {
            $("#statics").toggle("slow");
            $(".item-img").toggle('slow');
        }
        });
    $(".b-button").click(function () {
        if(!$("#statics").is(':visible')) {
            $("#chart").toggle("slow");
            $(".item-img").toggle('slow');
        }
        });
});

Working Fiddle