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-button または b-button のいずれかで item-img を非表示にした場合、最初のトグルをクリックする前に他のトグル (a または b) をクリックして、アイテム -img を再度表示します。 #statics と#チャートが表示され、大きな混乱を引き起こします。

別のトグルがまだ元に戻っていないときに、あるトグルを無効にするにはどうすればよいですか?

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 に答える