JQuery - Única función para funciones recursivas

 
Vista:
sin imagen de perfil

Única función para funciones recursivas

Publicado por anonymous (3 intervenciones) el 14/05/2018 12:42:05
Buenas tardes,

Actualmente tengo una duda para como realizar un código más optimizado de lo que pretendo hacer, la idea es la siguiente:

HTML:
1
2
3
4
5
6
7
<p>TITULO 1</p>
<div id="txt-completo-1">DESC...</div>
<p><span id="btn-leer-mas-1">[Leer Más]</span></p>
 
<p>TITULO 2</p>
<div id="txt-completo-2>DESC...</div>
<p><span id="btn-leer-mas-2">[Leer Más]</span></p>


JS:
1
2
3
4
5
6
7
jQuery(document).ready(function(){
    jQuery('#btn-leer-mas-1').on('click',function(){
      jQuery('#txt-completo-1').toggle('slow');
   });
  jQuery('#btn-leer-mas-2').on('click',function(){
      jQuery('#txt-completo-2').toggle('slow');
....


Funcionar de este modo la idea funciona, el problema es que no estaría optimizado ya que habría que crear tantas funciones manualmente como elementos tienes en HTML.

¿Habría algún modo de utilizar una misma clase o identificador para los elementos HTML y así utilizar una única función que abriese SOLAMENTE el elemento dónde haces clic y no todos?

O alguna forma de crear una función en js que realice lo mismo que planteo pero sin necesidad de crear múltiples funciones cambiando el #id que realizan lo mismo.

Es decir, debería quedar algo así simplificado:

1
2
3
4
5
6
7
jQuery(document).ready(function(){
    jQuery('#btn-leer-mas').on('click',function(){
 
    FUNCIÓN-que-comprobase-en-que-elemento-del-dom-hizo-clic
 
    jQuery('#txt-completo').toggle('slow');
});


GRACIAS
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 302
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Única función para funciones recursivas

Publicado por xve (673 intervenciones) el 14/05/2018 17:03:34
Hola Adrián, porque no utilizas una clase en vez de los id's?

1
2
3
4
5
6
7
<p>TITULO 1</p>
<div id="txt-completo-1">DESC...</div>
<p><span id="btn-leer-mas-1" class="leer">[Leer Más]</span></p>
 
<p>TITULO 2</p>
<div id="txt-completo-2">DESC...</div>
<p><span id="btn-leer-mas-2" class="leer">[Leer Más]</span></p>

1
2
3
4
5
6
jQuery(document).ready(function(){
    jQuery('.leer').on('click',function(){
 
        FUNCIÓN-que-comprobase-en-que-elemento-del-dom-hizo-clic
   });
});

De esta manera, con un solo evento te vale para todos los que tienen la clase "leer"
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Única función para funciones recursivas

Publicado por anonymous (3 intervenciones) el 14/05/2018 18:23:34
Gracias por contestar,

La cuestión es que utilizando una clase desplegaría todos los divs que utilizan la clase y no quiero eso. Quiero que solamente despliegue el div en el que se hizo clic.

De la forma que yo he puesto, funciona. Pero claro... es necesario crear tantas funciones e ID´s como textos quieres desplegar.

Lo que me gustaría sería simplicar la función de JS para no tener que "repetir" líneas.


Así por encima la idea sería:
clic en cualquier elemento de clase "leer", compruebo qué elemento es, y despliego solamente ese elemento en concreto.


No se si me explico lo suficiente.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 302
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Única función para funciones recursivas

Publicado por xve (673 intervenciones) el 15/05/2018 07:48:45
No, no....solo se activara el que pulses!!! no todos!!! aunque solo haya un gestor de eventos, solo se ejecuta para el que has pulsado... si no, nadie lo utilizaria!!!

Luego con $(this) sabes que elemento ha sido pulsado.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de santi
Val: 162
Plata
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Única función para funciones recursivas

Publicado por santi (55 intervenciones) el 14/05/2018 18:35:49
Hola,

envuelve cada sección con un div y muestra según el que selecciones:

1
2
3
4
5
6
7
8
9
10
11
<div>
<p>TITULO 1</p>
<div id="txt-completo-1">DESC...</div>
<p><span id="btn-leer-mas-1">[Leer Más]</span></p>
</div>
 
<div>
<p>TITULO 2</p>
<div id="txt-completo-2">DESC...</div>
<p><span id="btn-leer-mas-2">[Leer Más]</span></p>
</div>

jQuery:

1
2
3
$('span').click(function(){
	$(this).parent().parent().find('div').toggle();//parent 1 = <p>, parent 2 = <div> que envuelve la sección
});

Pero no estaría de más crear una clase tanto al span como al div que muestra el contenido..

Prueba a ver ;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

Única función para funciones recursivas

Publicado por anonymous (3 intervenciones) el 15/05/2018 11:56:32
Bien visto!

Todavía no he probado pero esa idea de "ir para atrás" y seleccionar el div que lo contiene parece buena.

Muchas gracias!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar