0

別々の click() 関数を使用して 2 つのクラスの可視性を切り替える次のコードを検討してください。

<!-- Toggles -->
<div class="a"></div>
<div class="b"></div>

<!-- Result -->
<div class="x" style="display:none"></div>
<div class="y" style="display:none"></div>
<div class="z" style="display:none"></div>

<!-- Script -->
$( ".a" ).click(function() {
var $this = $(this);
  $this.siblings(".x").toggle();
});


$( ".b" ).click(function() {
var $this = $(this);
  $this.siblings(".y").toggle();
});

x と y の両方が表示されるときはいつでも、x と y の両方の代わりに 3 番目のクラス "z" が表示されるように、これを更新するにはどうすればよいでしょうか?

4

3 に答える 3

1

デモ http://jsfiddle.net/Yn3L2/

休息はあなたのニーズに合うはずです:)

コード

$(".a").click(function () {
    var $this = $(this);
    $this.siblings(".x").toggle();
    checkZ();
});

$(".b").click(function () {
    var $this = $(this);
    $this.siblings(".y").toggle();
    checkZ();
});

function checkZ() {
    $('.z').hide();
    if ($('.x').is(':visible') && $('.y').is(':visible')) {

        $('.z').show();
    }
}
于 2013-10-28T09:41:12.877 に答える
0

これは次のように機能します: http://jsfiddle.net/DKRe2/1/

HTML:

<!-- Toggles -->
<div class="a">a</div>
<div class="b">b</div>
<!-- Result -->
<div class="x" style="display:none">class x</div>
<div class="y" style="display:none">class y</div>
<div class="z" style="display:none">class z</div>

JS:

<!-- Script -->
$(".a").click(function () {

    var $this = $(this);
    if ($this.siblings(".y").css('display') != 'none' && $this.siblings(".x").css('display') == 'none') {
        //now Hide y and show Z  
        $this.siblings(".y").toggle();
        $this.siblings(".z").toggle();
    } else {
        $this.siblings(".z").css('display', 'none');
        $this.siblings(".x").toggle();
    }
});


$(".b").click(function () {
    var $this = $(this);
    if ($this.siblings(".x").css('display') != 'none' && $this.siblings(".y").css('display') == 'none') {
        //now Hide y and show Z   
        $this.siblings(".x").toggle();
        $this.siblings(".z").toggle();
    } else {
        $this.siblings(".z").css('display', 'none')
        $this.siblings(".y").toggle();
    }
});
于 2013-10-28T09:41:28.950 に答える
0

これはあなたが本当に望んでいることだと思います。

ワーキングデモ

jQueryコードを追加

function checkZ() {
    $('.z').hide();
    if ($('.x').is(':visible') && $('.y').is(':visible')) {
        $('.x').hide(500);
        $('.y').hide(500)
        $('.z').show();
    }
}
于 2013-10-28T09:46:44.347 に答える