如何使我正在创建的灯箱仅在我单击的 div 上打开？

Question

我在做一个效果，我也会post代码，但这是基本前提。我有一个 div 包含 2 个 div 和一个隐藏的 div 称为测试。当我单击包含 div 时，我希望隐藏的 div（称为 "test"）仅针对我单击的包含 div 进行动画处理。现在它在每个 div 上打开，因为我编写代码的方式，我想我必须使用 "this" 才能按照我想要的方式正确打开它，但我我不确定在这种情况下如何使用它

TLDR：当我单击 div .workImg（或 workBlock）时，我想在 div .test 上切换 class .open，目前它在每个 . workImg，我希望它只在我单击的那一个上打开。我很困惑，我想我需要在此处的某处使用 $(this) 来定位我正在单击的那个，但无法弄清楚如何应用它，因为我所有的 class 名称都是相同的...

HTML:

<div class="workCont">
    <div class="workBlock">
        <div class="workImg">
            <div class="test"></div>
            <img src="/assets/images/piece1.jpg" />
        </div>
        <div class="workName">Project</div>
    </div>
    <div class="workBlock">
        <div class="workImg">
            <div class="test"></div>
            <img src="/assets/images/piece1.jpg" />
        </div>
        <div class="workName">Project</div>
    </div>
    <div class="workBlock break">
        <div class="workImg">
            <div class="test"></div>
            <img src="/assets/images/piece1.jpg" />
        </div>
        <div class="workName">Project</div>
    </div>
</div>

CSS:

.workCont {
    width:1024px;
    margin: $center;
    overflow:hidden;
    .workBlock {
        float:left;
        margin-left:17px;
        &:nth-child(3n+1) {
            margin-left:0;
        }
        &:nth-child(1n+1) {
            margin-top:33px;
        }
        .workImg {
            background:#151515;
            width:330px;
            height:201px;
            display:inline-block;
            position: relative;
        }
        .test {
            position: absolute;
            z-index:100;
            width: 0px;
            height: 0px;
            -webkit-transition-duration: 1s;
            -webkit-transition-property: all;
            -webkit-transition-timing-function: ease-in-out;
            text-align: center;
            background: white;
            color: white;
            font-family: sans-serif;  /* Just 'cos */
        }
        .test.open {
           transform: scale(50, 50);
            top: 0px;
            left: 0px;
            width: 1000px;
            height: 1000px;
            clear:both;
        }
        .workName {
            text-align:center;
            margin-top:17px;
        }
    }
}

jQuery:

$(document).ready(function(){
    $(".workImg").click(function() {  
        $(".test").toggleClass("open");      
    });
});

Answer 1

使用$(this)

$(document).ready(function(){
    $(".workImg").click(function() {  
        $(this).find(".test").toggleClass("open");      
    });
});

如何使我正在创建的灯箱仅在我单击的 div 上打开？

How do I make this lightbox I am creating only open on the div I am clicking?

html

javascript

css

jquery

sass