1

Estoy haciendo un consulta de producto que jala los item de una base de datos. Al momento de dar click en un enlace este muestra un contenido.

Lo que pasa es que estos item están dentro un bucle While. Lo que quiero es conseguir que al dar click en más info se muestra la información del producto.

Para ello requiero que el contenido de una variable entre dentro de un selector JQuery.

Quisiera saber cual sería la sintaxis.

Tengo el siguiente codigo:

<div class="informacion">
<p class="info_pro col-md-6"><a href="#enlace<?php echo $fila[ind];?>" class="enlace_detalles">VER DETALLES</a></p>
<p class="icon_call col-md-6">
<a href="tel:013095009"><i class="fa fa-phone"></i></a>
<a href="mailto:[email protected]"><i class="fa fa-envelope-o"></i></a>
</p>
</div>
<div id="enlace<?php echo $fila[ind];?>" class="detalles_p">
<div class="detalle_img">
<img src="<?php echo"$fila[ruta]"; ?>" class="img-responsive">
</div>
<div class="detalles_info">
<p><i class="detalle_item">INDICE:</i><?php echo"$fila[ind]" ?></p>
<p><i class="detalle_item">MATERIAL:</i><?php echo"$fila[material]" ?></p>
<p><i class="detalle_item">CANTIDAD:</i><?php echo"$fila[cantidad]" ?></p>
<p><i class="detalle_item">IMPRESIÓN:</i><?php echo"$fila[impresion]" ?></p>
<p><i class="detalle_item">TAMAÑO:</i><?php echo"$fila[tamano]" ?></p>
<p><i class="detalle_item">PRESENTACIÓN:</i><?php echo"$fila[presentacion]" ?></p>
<p><i class="detalle_item">SERVICIO DE ENTREGA:</i><?php echo"$fila[servicio]" ?></p>
</div> en<?php echo $fila[ind];?>
<div class="detalles_bn">
<a href="tel:013095009">Llama al proveedor <i class="fa fa-phone"></i></a>
<a href="mailto:[email protected]">Solicitar cotización <i class="fa fa-envelope-o"></i></a>
<p>"SpamBot Automatic: Opps!!, Este servicio borra automáticamente todos los correos de servidores gratuitos, por lo que agradeceremos enviar su requerimiento desde su correo corporativo."</p>
</div>
</div>

Y este es mi Jquery.

  $(".enlace_detalles").click(function(){
        var href= $(this).attr('href');
        var hrefnew="'"+ href + "'";
        Aqui es donde no se como llamar a mi variable?
    });

A ver para hacer más exacto... Quiero poner el contenido de una variable dentro de un selector Jquery...¿Como lo hago?

$(".enlace_detalles").click(function(){ var href= $(this).attr('href'); var hrefnew="'"+ href + "'"; $(hrefnew).slideUp("slow"); <--- Esto es lo que no se hacer... });

La clase ".enlace_detalles" es el enlace que abre el div que contiene la info...pero al estar en un bucle...doy click en este enlace y se abren o cierran todos los div. y lo que yo quiero es que si le doy click a item1 me abra el detalle del item1 ...si doy click en el item2 me abra el detalle del item2 y asi sucesivamente.

7
  • Puedes darnos mas del código, por ejemplo lo que haces dentro del While, porque de momento no entiendo lo que quieres hacer. Por ejemplo la clase .enlace_detalles que utilizas en $(".enlace_detalles") no la veo. Commented el 9 mar. 2018 a las 16:24
  • Elimine mi respuesta porque ahora que lo leo mejor no es lo que necesitas, como dice @DeivisGonzálezGonzález deberias intentar explicarnos un poco mejor y mostrar mas código porque no se entiende claro que es lo que queres lograr. Commented el 9 mar. 2018 a las 16:33
  • Pon tu código lo más general posible no veo donde creas el vínculo con la clase .enlace_detalles ni los atributos que tiene. Si puedes introduce hasta el while Commented el 9 mar. 2018 a las 16:38
  • Segùn entendì... Si el loop lo tienes en PHP por que no imprimes el id del producto en los enlances?... creo que ni siquiera necesitas jQuery ya que ese còdigo en jQuery es algo reduntante... Commented el 9 mar. 2018 a las 19:51
  • ¿Que es exactamente lo que guarda la variable href ? ¿Un id?¿ El nombre class que piensas mostrar? Commented el 9 mar. 2018 a las 21:40

2 respuestas 2

2

Lo que tiene que hacer para mostrar tu producto es usar el selector $() tal como lo estabas haciendo solo que cuando recuperes el id lo concatenas con # como en el ejemplo.

$(".div-show").click(function() {
  $(".hide").hide();
  var id = $(this).attr("href");
  $("#" + id).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div href="myId1" class="div-show">
  <label>Mostrar Mensaje 1</label>
  <label id="myId1" class="hide" style="display:none;">Estoy Oculto 1</label>
</div>
<div href="myId2" class="div-show">
  <label>Mostrar Mensaje 1</label>
  <label id="myId2" class="hide" style="display:none;">Estoy Oculto 2</label>
</div>
<div href="myId3" class="div-show">
  <label>Mostrar Mensaje 1</label>
  <label id="myId3" class="hide" style="display:none;">Estoy Oculto 3</label>
</div>

6
  • Excelente gracias...Me sirvió.. Commented el 9 mar. 2018 a las 22:12
  • Ahora tengo otro problema...Que al dar click me abré el item si pero al dar click en el otro item ¿ Comó hago para que el anterior se cierre automaticamente? tu me puedes ayudar con eso? Commented el 9 mar. 2018 a las 22:22
  • @KarlosYalta Actualizo mi respuesta para que te funcione teniendo en cuenta eso. Commented el 9 mar. 2018 a las 22:26
  • No es lo que estoy buscando es como el collapse de bootstrap pero como lo aplico ahora a mi codigo eso...si esta en bucle Commented el 9 mar. 2018 a las 22:43
  • Te pongo eso a modo de ejemplo.¿ Que usas para hacer la función collapse? Commented el 9 mar. 2018 a las 22:48
0

Recomiendo que uses los Collapse de boostrap, pero si lo haces manual tiene que tener una referencia a cual elemento mostraras, el elemento <a> le agregas un atributo en data-aquiloquequieras con un valor unico, porque esta lo usas para identificar el <div> que necesitas colapsar, en el ejemplo yo uso el id, pero puede ser cualquier otro atributo.

*{
  border-bottom:white;
}
.contenedor{
  width:100%;
  border:green solid 1px;
}
.hidden{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contenedor">
  <a href="#" data-referencia="1" class="mostrar-detalle">1</a>
  <div id="1">Expande 1</div>
</div>
<div class="contenedor">
  <a href="#" data-referencia="2" class="mostrar-detalle">2</a>
  <div id="2" >Expande 2</div>
</div>
<div class="contenedor">
  <a href="#" data-referencia="3" class="mostrar-detalle">3</a>
  <div id="3">Expande 3</div>
</div>
<div class="contenedor">
  <a href="#" data-referencia="4" class="mostrar-detalle">4</a>
  <div id="4">Expande 4</div>
</div>


<script>
$('.mostrar-detalle').on('click', (e)=> {			
	let idMostar = $(e.currentTarget).data().referencia; //puede ser clave o lo que los identifique
  $('#'+idMostar).toggleClass("hidden")		
});
</script>

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.