0

我有一个带有 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），然后单击第一个切换器以再次显示项目 -img，#statics 和#chart 出现，搞得一团糟。

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

4

2 回答 2

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');
        }
        });
});

工作小提琴

于 2012-08-19T12:05:17.813 回答
1 
jQuery(document).ready( function($) {
    var state;

    $(".a-button").click(function () {
        $("#statics").toggle("slow");
        $(".item-img").toggle('slow');

        state = $(".b-button").prop('disabled');
        $(".b-button").prop('disabled', !state);
    });
    $(".b-button").click(function () {
        $("#chart").toggle("slow");
        $(".item-img").toggle('slow');

        state = $(".a-button").prop('disabled');
        $(".a-button").prop('disabled', !state);
    });
});

编辑：没有意识到您没有使用实际按钮，请参阅使用此更新的 html 的工作演示（不确定您是否可以选择更改这些按钮）：

<input type="button" class="a-button" value="Toggle A">
<input type="button" class="b-button" value="Toggle B">
于 2012-08-19T12:05:26.193 回答