How to add a class to only one div on click?

Question

So I am having 2 issues here and maybe this is just a poor execution in general so please point me in the right direction.

1.) Regardless of how many black boxes there are the last one always works correctly, meaning I click the black box and it opens then a red box appears, I can close the box by clicking the dark area surrounding the red box or the red box itself. The issue comes when I click any boxes before the last box, it opens as expected but when I try to close it by clicking the red box it opens another instance of the dark background, I don't want that to happen.

2.) So I think the deeper issue is when I click a black box it is adding the class "fart" to ALL .testthree divs instead of just the one for the area I am clicking AND when I click the red box it is also adding the class "open" to all of the other test divs.

So my question is, Is there a way to contain the classes that are added ONLY to the initial place that I click? What I want to happen is:

I click workImg, test gets the class of open, and testthree gets the class of fart, ONLY for the workImg that i click on. Then when I click anywhere it all closes nicely.

Link to fiddle:

http://jsfiddle.net/dkarasinski/L6gLLyko/

HTML:

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

CSS:

.workImg {
            background:#151515;
            width:330px;
            height:201px;
            display:inline-block;
            position: relative;
        }
        .test {
            position: fixed;
            top: 50%;
            left: 50%;
            z-index:100;
            width: 0;
            height: 0;
            -webkit-transition-duration: 300ms;
            -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 {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            position:fixed;
            color:black;
            background-color: rgba(0, 0, 0, 0.8);
        }
        .testthree {
            width:0;
            height:0;
            background-color: red;
            margin:auto;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .testthree.fart {
            width:50%;
            height:300px;

        }

        .testthree.close {
            display:none;
        }
        .workName {
            text-align:center;
            margin-top:17px;
        }

JQuery / Javascript:

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

        if ($(this).find(".test").hasClass("one")) {
            if($('.testthree').hasClass("fart")) {
                $(".testthree").removeClass("fart");
            }
            else {
                setTimeout(function(){
                    $( ".testthree" ).addClass( "fart" );
                }, 500);
            }        
        }
     });
});

Answer 1

Why don't you just ignore the whole fart and close classes. And make .testthree invisible by default..

.testthree {
    width:50%;
    height:300px;
    background-color: red;
    margin:auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display:none;
}

Then just do...

$(document).ready(function(){
   $(".workImg").click(function() {  
    var test = $(this).find(".test");
    test.toggleClass("open");
    setTimeout(function(){
      test.find(".testthree").toggle();        
    },100);
   });
});

JSFIDDLE HERE

Answer 2

Replace all your code in else block with this:

var scope=$(this);
setTimeout(function(){
    scope.find('.testthree').addClass('fart');
},500);

You needed a scope to work within and not apply fart class to all of the .testthree elements. Hope you find it useful.

Update: Your complete code may look like:

$(document).ready(function () {
    $(".workImg").click(function () {
        var scope = $(this);
        var test = scope.find('.test');
        var testthree = scope.find('.testthree');
        test.toggleClass('open');
        if (test.hasClass('one')) {
            if (testthree.hasClass('fart')) {
                testthree.removeClass('fart');
            } else {
                setTimeout(function () {
                    testthree.addClass('fart');
                }, 500);
            }
        }
    });
});

Hope this helps.

Answer 3

Try below code

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

    if ($(this).find(".test").hasClass("one")) {
        if($(this).find('.testthree').hasClass("fart")) {
            $(this).find(".testthree").removeClass("fart");
        }
        else {
            setTimeout(function(){
                $(this).find( ".testthree" ).addClass( "fart" );
            }, 500);
        }        
    }
 });
});