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

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时，它才有效

我想要实现的是，如果我单击pop1的启动器，则应该显示第一个叠加层的内容和背景

其余的一样

我发现的最接近的是这个Single函数，可以单独切换其他div中的多个div

但这并不能真正解决我特定情况下的问题，我必须根据元素的类切换活动类

编辑：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中

   .overlay-background.active, .overlay-content.active { display: block; } 

• 在Javascript中，

   $(".overlay-launcher").click(function () { $('.overlay-content,.overlay-background').removeClass("active"); $(this).siblings('.overlay-content,.overlay-background').addClass("active"); }); $('.overlay-close').on('click', function(){ $('.overlay-content,.overlay-background').removeClass("active"); }); 

工作小提琴https://jsfiddle.net/sachin_puthran/ssmstjvu/7/

Answer 2

您的页面中不应有多个具有相同id元素。 id值在特定页面内应该是唯一的。

还要注意其他语法错误：

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