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），然后再单击第一个切换器再次显示项目-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

Answer 2

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

修改：没有意识到您没有使用实际按钮，see working demo使用此更新的html（不确定您是否可以选择更改这些按钮）：

<input type="button" class="a-button" value="Toggle A">
<input type="button" class="b-button" value="Toggle B">

当另一个切换器没有切换回时，如何禁用一个切换器？

2 个答案: