Question

所以我在这里遇到了两个问题，也许这只是一个糟糕的执行情况，所以请指出我正确的方向。

1。）无论有多少黑匣子，最后一个总是正常工作，这意味着我点击黑匣子然后打开然后出现一个红色框，我可以通过点击红色框周围的暗区来关闭该框或红色框本身。当我点击最后一个框之前的任何方框时会出现问题，它会按预期打开，但当我尝试通过单击红色框关闭它时会打开另一个深色背景的实例，我不希望这种情况发生。< / p>

2。）所以我认为更深层次的问题是，当我点击一个黑匣子时，它正在添加课程＆＃34; fart＆＃34;到所有.testthree div而不是我点击的区域的那个div当我点击红色框时它也添加了类＃34;打开＆＃34;所有其他测试组。

所以我的问题是，有没有办法包含仅添加到我点击的初始位置的类？我想要发生的是：

我单击workImg，test获取open类，testthree获取fart类，仅适用于我点击的workImg。然后，当我点击任何地方时，它都会很好地关闭。

链接到小提琴：

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

你为什么不忽略整个屁和关闭课程。并且默认情况下使.testthree不可见..

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

然后就这样做......

$(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

将else块中的所有代码替换为：

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

您需要范围才能在fart元素的所有中使用.testthree类。希望你觉得它很有用。

更新：您的完整代码可能如下所示：

$(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);
            }
        }
    });
});

希望这有帮助。

Answer 3

尝试以下代码

$(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);
        }        
    }
 });
});

如何在点击时仅将一个类添加到一个div？

3 个答案: