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

Hola, Me gustaría hacer clic en el texto Add comment y mostrar class="text_area", pero ahora si hago clic en Add comment mostrar todas las áreas de texto, pero me gustaría detectar en qué se hizo clic.

p.ej. si hago clic en el segundo Add comment segundo área de texto se mostrará

0
Mat.Now 13 ene. 2017 a las 21:11

4 respuestas

La mejor respuesta

Puede usar el método jQuery next() de la siguiente manera.

$(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>
5
Ibrahim Khan 13 ene. 2017 a las 18:13

Es el próximo hermano, así que use el selector next ().

$(document).on("click", ".add_comment", function() {        
    $(this).next('.text_area').show();      
});
1
epascarello 13 ene. 2017 a las 18:13

Puede intentar envolver sus elementos en un contenedor y hacer que el controlador de clics sea específico para el contenedor.

Ejemplo de envoltura:

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

Clic actualizado:

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

Jsfiddle: https://jsfiddle.net/gyutjb53/

2
Hodrobond 13 ene. 2017 a las 18:17

Definitivamente, envolver elementos. Hablando estructuralmente, cada uno de los bloques de contenido es discreto y debe poder manipularse discretamente. Es todo el enfoque de "caja negra": todo lo estructural del bloque está contenido por el bloque.

// 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();
})
.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">
  <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>
0
Snowmonkey 13 ene. 2017 a las 18:41