打开特定div的弹出窗口。

Question

当我单击class="team-single" of id="team-1"时，它应该打开特定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()的答案是更好的解决方案。我只是张贴这篇文章，这样你就可以理解你的代码到底出了什么问题。