Plegar y desple

[Sthr]

Hola,

tengo una duda respecto a jquery.

Tengo una funcion para plegar y desplegar un div al pulsar un botón, esto mismo se repite a lo largo de todo el sitio.

Mi pregunta es como puedo modificar esta función para que en vez de personalizarla para cada uno de los divs, sea generica para todos ellos y poder hacer la acción sobre todos estos divs en vez de hacer una función para cada uno de ellos. No se si me he explicado bien jeje!

Yo tengo algo asi para cada caso:

$("#boton").click(function(){

$("#capa").slide('fast')

});

y luego en el html, algo asi:

<p class="boton-verde" id="boton"><input type="submit" value="configurar precio" id="configurar-precio" /></p>

<div class="configurar-precio">bla bla bla</div>

Muchas gracias!

[JavierB]

Mensaje movido al foro de Frameworks desde Javascript.

Saludos,

[arthpix]

Utiliza un selector ID para el objeto que dispara la acción click y un selector CLASE para los objetos que recibirán la acción:

Código:

// La acción la aplica el botón con id="configurar-precio"
// sobre todos los divs de clase="configurar-precio"
$("#configurar-precio").click(function(){
      $(".configurar-precio").slide('fast')
   });

HTML:

Código:

<p id="boton-verde">
   <input type="submit" value="configurar precio" id="configurar-precio" />
</p>

<div class="configurar-precio">
      bla bla bla...
</div>

<div class="configurar-precio">
      ble ble ble...
</div>

<div class="configurar-precio">
      bli bli bli...
</div>

[Sthr]

Pero con ese código, si en una misma página tengo dos o más casos de estos que digo, para desplegar y plegar, al pulsar el boton se desplegarian todos,no? Y yo lo que quiero que se despliegue el div que esta inmediatamente posterior a ese boton.
No es asi?
Muchas gracias.

[arthpix]

Es lo que entendí en tu pregunta... ahora me quedó mas claro... dame dos minutos

[arthpix]

Upss! tardé bastante más de 2 minutos... perdón los clientes son primero

Utiliza each para ejecutar una función en contexto de cada elemento encontrado.

Código javascript:

$(document).ready(function(){
// Declaramos la función para cada botón de clase "configurar"
$(".configurar").each(function(){
// Declaramos una variable "id" para sacar el valor del atributo del botón actual
var id = $(this).attr("id");
// Pasamos la variable obtenida como un parametro más del selector
$(".configurar[id="+id+"]").click(function(){
// Otra vez, pasamos la variable para definir los parámetros del callback
// de nuestra funcion
$(".precios[name="+id+"]").slide("fast");
})
})
});
 

El HTML sería asi:

Código HTML:

<p>
<input type="submit" value="configurar precio uno" class="configurar" id="precio1" /><br />
<input type="submit" value="configurar precio dos" class="configurar" id="precio2" /><br />
<input type="submit" value="configurar precio tres" class="configurar" id="precio3" /><br />
</p>

<div class="precios" name="precio1">
bla bla bla...
</div>

<div class="precios" name="precio2">
ble ble ble...
</div>

<div class="precios" name="precio3">
bli bli bli...
</div> 

[eall]

si es el div que está despues del boton utiliza el selector $(tuboton + div) y así tomará solo el div que siguie despues del boton

Código javascript:

$("input").click(function(){
//busca el botón pulsado y al siguiente elemento con la clase configurar-precio le genera el efecto.
      $("#" + $(this).attr("id") + " + .configurar-precio").slide('fast')
   });
 

espero te sirva

[arthpix]

eall, ofreces soluciones bien sencillas y fáciles de entender. Ya tienes un lector más de tu blog

[Sthr]

OK, voy a probarlo y os digo. Muchas gracias!!