javascript - 检测同一个类中的哪个元素被点击并显示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 显示所有文本区域，但我想要检测点击的内容。

e.g. if I click second Add comment second textarea will show

Answer 1

您可以使用 jQuery next() 方法，如下所示。

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