0

$(function(){

$('button').on('click',function(){

var s = $('.contenedor p');

if ($(this).text() === 'Ocultar'){
    $(this).text('Mostrar');
    s.fadeOut();    
} else {
    $(this).text('Ocultar');
    s.fadeIn();
}

});
  });
.contenedor{
background: #EDEDED; height: 300px; width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
<section>
<button>Ocultar</button>
</section>
<div class="contenedor">
    <p>tortuga</p>
</div>
    </div>
<br>
<div class="container">
 <section>
<button>Ocultar</button>
</section>  
<div class="contenedor">
    <p>gato</p>
</div>
    </div>
<br>
<div class="container">
<section>
<button>Ocultar</button>
</section>
<div class="contenedor">
    <p>loro</p>
</div>
    </div>
<br>
<div class="container">
<section>
<button>Ocultar</button>
</section>
<div class="contenedor">
    <p>pato</p>
</div>
    </div>

Hola a todos que estén leyendo esto, tengo este código de prueba, en el cual muestra botones y 4 divs que contienen un parrafo. Mi problema es el siguiente, espero me puedan ayudar: No logro hacer que un texto en particular se oculte. Cuando le das en ocultar, se ocultan todos los elementos p, ¿Cómo oculto sólo el texto que esta debajo del boton y no todos? En otras palabras, cuando se de clic en un boton se debe ocultar el texto que este debajo suyo y evitar que todos se oculten. (Aún soy novato en Jquery). Gracias.

3 respuestas 3

1

$(function(){

$('button').on('click',function(){

var s = $(this) // botón al que se dio click
       .parent() // navegar hacia su padre '<section>'
       // en el padre buscar sus hermanos que tenga la clase .contenedor
       .siblings('.contenedor') 
       // elegir el primer hermano con esa clase
      .first();

if ($(this).text() === 'Ocultar'){
    $(this).text('Mostrar');
    s.fadeOut();    
} else {
    $(this).text('Ocultar');
    s.fadeIn();
}

});
  });
.contenedor{
background: #EDEDED; height: 300px; width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
<section>
<button>Ocultar</button>
</section>
<div class="contenedor">
    <p>tortuga</p>
</div>
    </div>
<br>

<div class="container">
 <section>
<button>Ocultar</button>
</section>  
<div class="contenedor">
    <p>gato</p>
</div>
    </div>
<br>

<div class="container">
<section>
<button>Ocultar</button>
</section>
<div class="contenedor">
    <p>loro</p>
</div>
    </div>
<br>
<div class="container">
<section>
<button>Ocultar</button>
</section>
<div class="contenedor">
    <p>pato</p>
</div>
    </div>

0

Si solo requieres ocultar el texto, entonces debes cambiar tu variable s por algo como esto:

var s = $(this).parent().parent().find(".contenedor p");

pero si también quieres ocultar el cuadro gris que contiene el texto, entonces la respuesta de @Lobos es la indicada.

1
  • Tu respuesta era lo que espera que hiciera el boton. Gracias, problema resuelto.
    – Husdady
    Commented el 3 oct. 2020 a las 2:10
0

Hola todo el problema se reduce a elegir un selector adecuado de modo que apunte al elemento p que deseas ocultar. Como tanto el button como p están dentro de un mismo div mientras que los demás se encuentran en otros bloques, te debe funcionar .closest('p') El p más cercano.

// En tu script  
$('button').on('click',function(){
    // var s = $('.contenedor p'); // debe cambiar por
    var s = $( this ).closest('p');
    // no revisé el resto del código. A primera vista parece correcto.

referencia jQuery closest selector

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.