打开特定div的弹出框

Question

当我点击id="team-1"的class="team-single"时，它应该打开该特定ID的.team-popup。

但它似乎没有工作。

<div class="team-single" id="team-1"> 
    <div class="team-popup">  
     <span class="close-btn">x close</span>  
    </div> 
</div> 
<div class="team-single" id=team-2> 
    <div class="team-popup">   
     <span class="close-btn">x close</span> 
    </div> 
</div> 

这是我使用什么JS

jQuery(".team-single").click(function(e) { 
    var currentID = this.id || "No ID!";  
    jQuery(" #currentID .team-popup").css({ 
     display :"block", 
    }); 
    }); 

Answer 1

使用find()与this获得当前上下文

jQuery(".team-single").click(function(e){ 
    jQuery(this).find(".team-popup").css({ display :"block", 
    }); 
//Or 
// jQuery(".team-popup",this).css({ display :"block", 
    }); 
}); 

为什么你的代码没有工作：

您存储在一个变量的ID，并选择使用的访问此变量：

jQuery("#"+currentID+" .team-popup"). 

Answer 2

我会减少你有什么，只是：

jQuery(".team-single").click(function(e) { 
    jQuery(this).find('div.team-popup').show(); 
}); 

Answer 3

的变量不是取代内部的字符串。如果你想在一个字符串使用一个变量，你必须使用串联：

$("#" + currentID + " .team-popup") 

但使用$(this).find()答案是更好的解决方案。我只是发布这个，所以你可以理解你的代码有什么问题。

Answer 4

使用此：

jQuery(".team-single").click(function(e){ 
    $(this).children().css("display", "block"); 
});