基于单击元素的多元素切换类

Question

我的代码看起来像是:-

<div id="boxgallery" class="boxgallery" data-effect="effect-3">
            <div class="panel"><img src="img/2.jpg" alt="Image 2" />
                <button class="button overlay-launcher" id="pop2">
                    link
                </button>
                <div id="pop2" class="overlay-background"></div>
                <div id="pop2" class="overlay-content">
                    <button id="pop2" class="overlay-close">Close overlay Window</button>
                </div>
            </div>
            <div class="panel"><img src="img/3.jpg" alt="Image 3" />
                <button class="button overlay-launcher" id="pop3">
                    link
                </button>>
                <div id="pop3" class="overlay-background"></div>
                <div id="pop3" class="overlay-content">
                    <button id="pop3" class="overlay-close">Close overlay Window</button>
                </div>
            </div>
            <div class="panel"><img src="img/1.jpg" alt="Image 1" />
                <button class="button overlay-launcher" id="pop1">
                    link
                </button>>
                <div id="pop1" class="overlay-background"></div>
                <div id="pop1" class="overlay-content">
                    <button id="pop1" class="overlay-close">Close overlay Window</button>
                </div>
            </div>
            <div class="panel"><img src="img/4.jpg" alt="Image 4" />
                <button class="button overlay-launcher" id="pop4">
                    link
                </button>>
                <div id="pop4" class="overlay-background"></div>
                <div id="pop4" class="overlay-content">
                    <button id="pop4" class="overlay-close">Close overlay Window</button>
                </div>

            </div>
        </div>

我试着:-

$(function() {
                $(".overlay-launcher").click(function() {
                    $(".overlay-content,.overlay-background").toggleClass("active");
                });
            });

但是，只有当我只有其中之一或者分别为每个jquery编写jquery时，它才能工作。

我想要实现的是，如果我单击pop1的启动程序，那么第一个覆盖的内容和背景就会出现。

其余的也一样

我发现最近的是这个Single function to toggle multiple divs inside other divs individually

但在我的具体情况下，它并不能真正解决问题--我需要根据元素的类切换活动类

编辑: CSS是这样的：-

.overlay-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: .50;
    z-index: 1000;
}
.overlay-content {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 20px 0 #222;
    display: none;
    height: 240px;
    left: 50%;
    margin: -120px 0 0 -160px;
    padding: 10px;
    position: absolute;
    top: 50%;
    width: 320px;
    z-index: 1000;
}
.overlay-background .active,
.overlay-content .active {
    display: block;
}

Answer 1

下面是两件需要做的事情，以使它发挥作用。

• 在css中， 覆盖-背景.活动，.覆盖-内容.活动{显示:块；}
• 在Javascript中 $(“..overlay launcher”).click(函数() {$(‘..overlay content，..overlay background’).removeClass(“活动”)；$(此).siblings(‘..overlay content，..overlay background’).addClass(“active”)；}；$(‘..overlay关闭’).on(‘click’，function(){ $(‘..overlay content，..overlay active’).removeClass(“active”)；}；

工作小提琴puthran/ssmstjvu/7/

Answer 2

您不应该使用相同的id在页面中使用这样的多个元素。id值在特定页面中应该是唯一的。

还请注意其他语法错误：

</button>>
</button>>
$(".overlay-launcher,")