如何添加一个类到只有一个div点击？

所以我在这里有两个问题，也许这只是一个糟糕的执行一般，所以请指出我在正确的方向。如何添加一个类到只有一个div点击？

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

2.）所以我认为更深层次的问题是，当我点击一个黑盒子时，它将类“放屁”添加到所有.testthree div中，而不仅仅是我点击的区域，当点击红色它还将“打开”类添加到所有其他测试div。

所以我的问题是，是否有一种方法来包含仅添加到我点击的初始位置的类？我想要发生的事情是：

我点击workImg，测试获取打开的类，并且testthree获取屁类，只为我单击的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); 
      }   
     } 
    }); 
});

来源

2015-06-14 GrooveChampion

替换所有的代码在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); 
      } 
     } 
    }); 
});

希望这有助于。

来源

2015-06-14 21:41:16

谢谢！这让我疯狂，我知道这跟我写“这个”的方式有关......我忘记把范围锁定在我需要的地方，把它变成一个变量。我永远不会再忘记这一切！感谢感谢！ – GrooveChampion

很高兴帮助。对。如果我没有错，'setTimeout'中的$（this）'返回'window'对象。 –

试试下面的代码

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

来源

2015-06-14 21:22:56 vinayakj

你为什么不只是忽略了整个屁和关闭类。而且使无形.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

来源

2015-06-14 21:32:14 KyleK

如何添加一个类到只有一个div点击？

回答

相关问题