Javascript 如何将if语句添加到切换函数

考虑以下代码，该代码使用单独的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();
});

$（“.a”）。单击（函数（）{
var$this=$（this）；
$this.sides（“.x”）.toggle（）；
});
$（“.b”）。单击（函数（）{
var$this=$（this）；
$this.sides（“.y”）.toggle（）；
});

我如何更新它，以便在x和y都可见时，显示第三类“z”，而不是x和y？

演示

• API

  是（':visible'）

休息时间应该适合您的需要

：）

代码

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

其工作原理如下所示：

HTML:

A.
B
x类
y类
z类

JS:

$（“.a”）。单击（函数（）{
var$this=$（this）；
if（$this.sides（“.y”）.css（'display'）！='none'&&$this.sides（'x”）.css（'display'）='none'）{
//现在隐藏y并显示Z
$this.sides（“.y”）.toggle（）；
$this.sides（“.z”）.toggle（）；
}否则{
$this.sides（“.z”）.css（'display'，'none'）；
$this.sides（“.x”）.toggle（）；
}
});
$（“.b”）。单击（函数（）{
var$this=$（this）；
if（$this.sides（“.x”）.css（'display'）！='none'&&$this.sides（'y”）.css（'display'）='none'）{
//现在隐藏y并显示Z
$this.sides（“.x”）.toggle（）；
$this.sides（“.z”）.toggle（）；
}否则{
$this.sides（“.z”）.css（'display'，'none'）
$this.sides（“.y”）.toggle（）；
}
});

我想这才是你真正想要的

添加了jQuery代码

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

---

@Tats_innit谢谢，如果我想保持与$this var的关系（即，能够在同一页面上多次使用此变量，但只触发同级类上的函数，如果（$this.sides（.a”）.is（':visible'）&（&（$this.sides（.b））（':visible'））有效吗？@alias51 yeah当然可以

：）

pass

this

作为函数参数，请注意，您需要随时了解

x

和

y

的可见性状态！请参阅此演示传递值，如下所示parameter@Tats_innit，谢谢，我很难理解如何将其作为函数参数传递；我正在使用checkZ（$this），但仍然得到一个未捕获的引用错误？谢谢，如果我想保持代码的关系（即通过引用siblings），那么这将如何工作，所以只有兄弟姐妹受到影响（类在页面的其他地方重复）？只需从前面添加兄弟姐妹选择器即可。我删除了它，因为在您给出的代码示例中它不是严格必需的。我将修改答案。谢谢，如果我想保持代码的关系（即通过引用siblings），这样只有兄弟姐妹受到影响（类在页面上的其他地方重复），这将如何工作？可能通过为子div提供唯一的Id并在jQuery中引用Id

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

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