Question

我想要实现的是，一旦我点击永久链接，在我的情况下＆＃34; 信息＆＃34;，就会出现一个灯箱，我希望粘性标题具有不透明度为0，因为它与我的灯箱重叠。我有以下代码：

setInterval(function() { 

    if (document.getElementsByClassName("lightbox-content").length) {

        document.getElementById("sticky-header").style.opacity = 0;
        document.getElementById("sticky-header").style.display = "none";

    }
    else {

        document.getElementById("sticky-header").style.opacity = 1;
        document.getElementById("sticky-header").style.display = "block";

    }
}, 100);

这很好用，但是，我记得这个代码可能是低效的，因为它每隔0.1秒重复一次（100毫秒）检查类是否存在，如果它存在，它会使粘性标题的不透明度为0并显示＆＃34; none ＆＃34;。这是我永久链接的html输出：

<span class="lightbox"><a href="" class="" title="Info" target="_self">Info</a></span>

点击它后，灯箱会出现，我的脚本可以识别班级＆＃34; lighbox-content ＆＃34;。如果我在灯箱外面点击，或者按Esc（可能是＆＃34; e.keyCode === 27 ＆＃34;）或点击＆＃34;关闭＆＃34;在右上角的按钮（X），灯箱在逻辑上消失，内容被隐藏在类＆＃34;灯箱内容隐藏＆＃34;。它存储在这个div中：

<div class="lightbox-content hide">...</div>

那么，有没有一种有效的方法来观察类，如果内容没有被隐藏，那么粘性标头的不透明度是0？某种触发？

最诚挚的问候。

更新

$(document).ready(function() {

    $(document).find("span.lightbox-content > button").click(function() {

        $("#sticky-header").css("opacity", 1);
        $("#sticky-header").css("display", "block");

    });

    $(document).mouseup(function (e) {

        var container = $("div.lightbox-content");

        if (!container.is(e.target) && container.has(e.target).length === 0) {

            $("#sticky-header").css("opacity", 1);
            $("#sticky-header").css("display", "block");

        }
    });

    $(document).keyup(function(e) {

        if (e.keyCode == 27 && $(".lightbox-content")[0]) {

            $("#sticky-header").css("opacity", 1);
            $("#sticky-header").css("display", "block");

        }
    });

    $("span.lightbox > a").click(function() {

        $("#sticky-header").css("opacity", 0);
        $("#sticky-header").css("display", "none");

    });
});

除按钮外，一切正常。我也尝试过使用它：

$("span.lightbox-content > button.lightbox-close").click(function() { ... }

遗憾的是我没有成功。我不知道自己错过了什么。这仍然没有使用切换，但它是一个解决方法。谁能告诉我我失踪了什么？有什么改进吗？

解

我用以下代码解决了按钮问题：

$(document).mouseup(function (e) {

    var container = $("button.lightbox-close");

    if (container.is(e.target) && $(".lightbox-content")[0]) {

        $("#sticky-header").css("opacity", 1);
        $("#sticky-header").css("display", "block");

    }
});

然而，这仍然很长。任何更简单的切换解决方案？其他方法？再次感谢！

检查类是否存在并执行code1，否则执行code2？

0 个答案: