检测单击同一类中的哪个元素并显示div

Question

$(document).on("click", ".add_comment", function() {		
	$('.text_area').show();		
});

.main_text
{
  width:260px;
  height:75px;
  background-color:#fff;
  border:1px solid #000;
  overflow:hidden;
}
.add_comment
{
  color:#05c;
  cursor:pointer;
}
.text_area
{
   position:relative;
   left:300px;
    top:-120px;
   display:none;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="main_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.     Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus       et magnis dis parturient montes, nascetur ridiculus mus. 
  </div>
  <p class="add_comment">Add comment</p>
  <div class="text_area">
    <textarea placeholder="Add comment"></textarea>
  </div>
  <div class="main_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.     Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus       et magnis dis parturient montes, nascetur ridiculus mus. 
  </div>
  <p class="add_comment">Add comment</p>
  <div class="text_area">
    <textarea placeholder="Add comment"></textarea>
  </div>
   <div class="main_text">Lorem ipsum dolor sit amet, consectetuer adipiscing         elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque           penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
  </div>
  <p class="add_comment">Add comment</p>
  <div class="text_area">
    <textarea placeholder="Add comment"></textarea>
  </div>  
</div>

您好,我想点击Add comment文字并显示class="text_area",但现在如果我点击Add comment显示所有textareas但我想检测点击的内容.

例如,如果我点击第二Add comment个textarea将显示

Answer 1

您可以使用next()如下的jQuery 方法.

$(document).on("click", ".add_comment", function() {		
	$(this).next('.text_area').show();		
});

.main_text
{
  width:260px;
  height:75px;
  background-color:#fff;
  border:1px solid #000;
  overflow:hidden;
}
.add_comment
{
  color:#05c;
  cursor:pointer;
}
.text_area
{
   position:relative;
   left:300px;
    top:-120px;
   display:none;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="main_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.     Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus       et magnis dis parturient montes, nascetur ridiculus mus. 
  </div>
  <p class="add_comment">Add comment</p>
  <div class="text_area">
    <textarea placeholder="Add comment"></textarea>
  </div>
  <div class="main_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.     Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus       et magnis dis parturient montes, nascetur ridiculus mus. 
  </div>
  <p class="add_comment">Add comment</p>
  <div class="text_area">
    <textarea placeholder="Add comment"></textarea>
  </div>
   <div class="main_text">Lorem ipsum dolor sit amet, consectetuer adipiscing         elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque           penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
  </div>
  <p class="add_comment">Add comment</p>
  <div class="text_area">
    <textarea placeholder="Add comment"></textarea>
  </div>  
</div>