Question

我想检查#kndpopup和#guildinfo元素是否已切换，然后点击#knd后我希望它们都回到未被遮挡状态。

目前，如果我点击#knd #kndpopup切换，那么当我再次点击#knd时，#kndpopup会按预期变为无效。但是，当我切换#kndpopup然后切换#guildinfo时，这是一个位于#kndpopup上的相同弹出窗口以隐藏它（就像另一个包含信息的页面），我无法解开#kndpopup和#guildinfo都带有#knd按钮，它只是在它们之间切换而不是关闭它们。我怎样才能解决这个问题？我在CSS中将这两个元素设置为display: none。

JavaScript的：

$("#knd").click(function() {
    $("#kndpopup").fadeToggle();

});

$(".info").click(function() {
    $("#kndpopup").fadeToggle();
    $("#guildinfo").fadeToggle();
});

已编辑代码：

$("#knd").click(function() {
    $("#kndpopup").fadeToggle();

    if($('#guildinfo').is(':visible')){
        $("#guildinfo").fadeToggle();
}

这种分类有效，但当#guildinfo切换并点击#knd时，当我点击#kndpopup时，它会切换回#knd，我该如何修复此问题？

3RD ATTEMPT：

$("#knd").click(function() {
    $("#kndpopup").fadeToggle();    

    if($("#guildinfo").is(':visible')){
        $("#guildinfo").fadeToggle();
    }

    else if($("#kndpopup").is(":hidden") && ("#guildinfo").is(":visible")) {
    return;
    }

});

它仍然没有按照我想要的方式工作，请帮助。

Answer 1

您可以使用此if语句来更改切换的行为。

if($('#kndpopup').is(':visible')){
    //This will run if the element is visible
}

Answer 2

这个答案可以解决问题：

$("#knd").click(function () {

    var KND = $("#kndpopup");
    var GUILDINFO = $("#guildinfo");

    if ((KND).is(':visible')) {
        $(KND).fadeOut();
    } 

    else if ((GUILDINFO).is(':visible')) {
        $(GUILDINFO).fadeOut();
        $(KND).fadeOut();
    } 

    else {
        $(KND).fadeIn();
    }

});

$(".info").click(function () {
    $("#kndpopup").fadeToggle();
    $("#guildinfo").fadeToggle();
});

如何使用Jquery检查是否切换了两个元素？

2 个答案: