打开特定div的弹出窗口

When I click on the class="team-single" of id="team-1" then it should open the .team-popup of that particular id.

当我点击id =“team-1”的class =“team-single”时,它应该打开该特定id的.team-popup。

But it doesn't seem to work.

但它似乎没有用。

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

This is what I am using for js

这就是我用于js的东西

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

4 个解决方案

#1

Use find() with this to get current context

使用find()来获取当前上下文

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

Why your code did not work :

为什么你的代码不起作用:

You stored the ID in a variable, and to access this variable in a selector use:

您将ID存储在变量中,并在选择器中访问此变量使用:

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

#2

I'd reduce what you have to just:

我会减少你所拥有的东西:

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

#3

Variables aren't substituted inside strings. If you want to use a variable in a string, you have to use concatenation:

变量不在字符串内替换。如果要在字符串中使用变量,则必须使用串联:

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

But the answers using $(this).find() are better solutions. I'm just posting this so you can understand what was wrong with your code.

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

#4

Use this:

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

#1