检测单击同一班级中的哪个元素并显示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但我想检测点击的内容。

  

e.g。如果我点击第二个Add comment第二个textarea将显示

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

.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;  
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以尝试将元素包装在包装器中，并使点击处理程序特定于包装器。

包装器示例：

<div class='wrapper'>
   <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>
</div>

更新了点击次数：

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

jsfiddle：https://jsfiddle.net/gyutjb53/

Answer 3

这是下一个兄弟，所以请使用next()选择器。

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

Answer 4

当然，包装元素。从结构上讲，每个内容块都是离散的，并且应该能够离散地操作。这是整个＆＃34;黑匣子＆＃34;方法 - 块的所有结构都包含在块中。

＆＃13;

＆＃13;

// When the el with the class add_comment is clicked,
$(".add_comment").on("click", function(){
  // Hide ALL elements with the class text_area,
  $(".text_area").hide();
  // Then just show the one that applies to this click.
  $(this).parent().children(".text_area").show();
})

＆＃13;

.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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <section class="content-item">
    <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>
  </section>
  <section class="content-item">
    <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>
  </section>
  <section class="content-item">
    <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>
  </section>
</div>

＆＃13;

＆＃13;

＆＃13;