recibir parametros en jQuery

MandrakeXP · #1 (**permalink**) 30/05/2008, 05:56

Hola

tengo un menu
<ul class="menu-h1">
<li id="id_1"><a href="" >ID 1</a></li>
<li id="id_2"><a href="" >ID 2</a></li>
</ul>

dependiendo de donde se hace clic: "ID 1" ó "ID 2"

deberá mostrar un div de los dos siguientes (que inicialmente estaran ocultos)

<ul id="id_1">
<li>1.1</li>
<li>1.2</li>
</ul>

<ul id="id_2">
<li>2.1</li>
<li>2.2</li>
</ul>

he programado esto:

<script type="text/javascript">

$(document).ready(function (){
$(".menu-h1 ul li#id#XXXXX").click(function mostrarDetalles(idDetalle)
{
if ($('div.menu-h2 id=" '+idDetalle+' " ').is(":hidden"))
{
$('div.menu-h2 id=" '+idDetalle+' " ').slideDown("slow");
}
else
{
$('div.menu-h2 id=" '+ idDetalle+' "').slideUp("slow");
}
});
}
</script>

la pregunta es:

1. ¿Cómo le doy valor a : XXXXX

2. Cómo asocio el XXXXX al idDetalle ?

es decir, quiero que si haces clic en "ID 1" muestre solo el menu
<ul id="id_1"> y si haces clic en "ID 2" muestre el menu <ul id="id_2">

gracias de antemano

leonardo308 · #2 (**permalink**) 06/02/2011, 19:20

y yo con la esperansa de que me respondieran la misma pregunta hoy mismo, como solucioneste tu problema?

LionCode · #3 (**permalink**) 06/02/2011, 21:37

no pongas el mismo id a 2 elementos distintos.

ahora pongamos menuid_1 y al ul le llamamos ulid_1 ok?

Luego los dioses crearon el maravilloso switch.

Ahora resumido

Código:

<ul class="menu-h1">
<li ><a id="menuid_1" onclick="mostrar(1)">ID 1</a></li>
<li ><a id="menuid_2" onclick="mostrar(2)">ID 2</a></li>
</ul>
<ul id="ulid_1">
<li>1.1</li>
<li>1.2</li>
</ul>
<ul id="ulid_2">
<li>2.1</li>
<li>2.2</li>
</ul>

<script type="text/javascript">
function mostrar(numero){
switch(numero){

case 1: $('#ulid_1').show();break;
case 2: $('#ulid_1').show();break;

};
}
</script>

Habria que darles mas efectos a los case como que escondan los demas ul, pero espero que entiendas el concepto

Dany_s · #4 (**permalink**) 07/02/2011, 09:14

evitá condicionales porque imaginate si tenes 10 item se te va a ser largo y otra es que si agregas mas item al html vas a tener que agregar al js también

podes relacionar el id de cada item con una clase de la sección

item #id1
con
sección .id1

otra sería obtener el índice al hacer click en un item, obtenes el íindice del li clickeado y mostrar el ul que tenga ese indice asi te desligas de agregar clase para conectar, aunque vas a estar obligado a respetar el orden

este ejemplo relaciono el id del li con una clase del ul

Código HTML:

Ver original<html>
    <head>
        <title>Ejemplo</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
        <script>
    $(function() {
        $('.menu-h1 a').click( function(){
            $('.secciones ul').hide();
            seccion = $(this).attr('id');
            $('.secciones ul.'+seccion).show();
            return false;
        });
    });
        </script>
    </head>
    <style>
        .secciones ul{display:none;}
    </style>
    <body>
        
        <ul class="menu-h1">
            <li><a href="" id="id1">ID 1</a></li>
            <li><a href="" id="id2">ID 2</a></li>
        </ul>
 
        <div class="secciones">
            <ul class="id1">
                <li>1.1</li>
                <li>1.2</li>
            </ul>
            <ul class="id2">
                <li>2.1</li>
                <li>2.2</li>
            </ul>
        </div>
 
    </body>
</html>

si querés agregar otros item
<li><a href="" id="id3">ID 2</a></li>
fijate que tiene #id3
entonces para agregar la sección que pertenece a ese item agregas el ul con la clase igual que el id del item
<ul class="id3">
<li>3.1</li>
<li>3.2</li>
</ul>

y solo modificas el html