javascript - 如何将 if 语句添加到切换功能

Question

考虑以下代码，它使用单独的 click() 函数切换两个类的可见性：

<!-- 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 都可见时，显示第三类“z”而不是 x 和 y？

Answer 1

演示 http://jsfiddle.net/Yn3L2/

• API is(':visible') http://api.jquery.com/visible-selector/

休息应该满足你的需要:)

代码

$(".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();
    }
}

Answer 2

这在这里显示：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();
    }
});

Answer 3

我认为这是你真正想要的。

工作演示

添加了 jQuery 代码

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