[SOLUCIONADO] efectos en div's diferentes con un solo li

[AjarDeNauer]

Buenas tardes. Disculpar por el título pero no se me ha ocurrido otra manera de describir mi duda..


Cómo puedo hacer para que al pulsar en el elemento de una lista, me cree un efecto rotatorio en un div y otro tipo de efecto en otro div? estoy trabajando con jquery

Estaba haciendo algo como ésto pero no consigo avanzar y no sé si estará bien:

<li class="ME2" href="#menusandwichera,#menudescripciones">Sandwic hera</li>


$(".ME2").click(function(){


var capa = $(this).attr("href");

¿ .....

..... ?

})


Cómo hago para diferenciar los dos identificadores al asignarlo a la variable capa?




Muchas gracias y si se necesita mas detalle intento explicarlo más.

Gracias.

[PHPeros]

Lo que intentas hacer no tiene ningún sentido.

Si tienes sus IDs obtenlos y somételos.

[AjarDeNauer]

Iniciado por PHPeros

Lo que intentas hacer no tiene ningún sentido.

Si tienes sus IDs obtenlos y somételos.

Es que ahí esta mi duda. Como bien dije no sé si así estará bien. Necesito obtener esos id al pulsar un menú y que hagan efectos diferentes trabajando con jquery

[pzin]

El enlace (en cursiva porque es un elemento de una lista y no un enlace, que si que tiene atributo href que li no tiene):

Código HTML:

<li class="ME2" href="#menusandwichera,#menudescripciones">Sandwic hera</li>
 

No tiene ningún sentido.

[AjarDeNauer]

Muy bien. Doblemente enterado de que mi ejemplo al cual me estoy refiriendo siempre como uno que no sé si estará bien no tiene ningún sentido.

Gracias.

[pzin]

Iniciado por AjarDeNauer

Muy bien. Doblemente enterado de que mi ejemplo al cual me estoy refiriendo siempre como uno que no sé si estará bien no tiene ningún sentido.

Gracias.

Nada.

Iniciado por PHPeros

Si tienes sus IDs obtenlos y somételos.

Entonces:

Código HTML:

<ul>
  <li class="me2"></li>
</ul>
 
<div id="menusandwichera"></div>
<div id="menudescripciones"></div>
 

Código Javascript:

$("li.me2").click(function(){
  menu_sandwichera = $("#menusandwichera")
  menu_descripciones = $("#menudescripciones")
})
 

[AjarDeNauer]

Vale, gracias, pero creo que no es exactamente lo que busco.

Desarrollo la idea:

Tengo un menú hecho con una lista de seis elementos (lo acorto en el ejemplo). Cada elemento de la lista abre otro submenú formado por dos div, uno sera una lista y otroun texto. Hasta aquí creo que podría servir la solución anterior. Pero si cada submenú ha de mostrar diferentes divs tengo que hacer que según el elemento de la lista pulsado, muestre un par de divs u otros... Me explico?

Quiero decir:

Menú x > submenu x1 , submenú x2
Menú y > submenú y1 , submenú y2

Entonces yo lo había planteado de la siguiente manera para intentar ahorra el máximo código posible y no andarme con 12 identificadores en el código jquery:

Código HTML:

[...]
<li class="ME2" href="#menujuego">Juego de mesa</li>
<li class="ME2" href="#menusand">sandwichera</li>
 
[...]
 
<div id="menujuego">
            <ul>    
           ...
               ...  
            </ul>
</div>
 
<div id="menusand">
            <ul>    
           ...
                   ...
            </ul>
</div>
 
<div id="descripcion1">blablabla</div>
  
<div id="descripcio2">blablabla
 

Código Javascript:

$(".ME2").click(function(){
        
var capa = $(this).attr("href");
 
if ($(capa).is(":visible")){ 
            
            $(capa).fadeOut()
            }else{ 
                $(capa).fadeIn();
                
        })
 

Pero lo que no consigo es pasar a la función dos identificadores. Si por ejemplo pulso "Juego de mesa" me tiene que mostrar el menú juego de mesa y la descripción 2 con sus correspondientes efectos. Y si pulso sandwichera ha de mostrarme el menú sandwichera y la descripción 1.

Tal y como he puesto el código y las etiquetas funcionan pero sin mostrar las descripciones. Por eso se me ocurrió añadir al href dos identificadores, el de menusand y el de su correspondiente descripción, la 1: href="#menusand",#descripción1". pero asi no funciona. La variable a la que asigno el attr("href") cogería dos identificadores y encima debería hacer un efecto diferente a cada uno...

Espero haberme explicado.

Por cierto, soy aficionado. Así que lo siento si algo resulta demasiado elemental.

[pzin]

Pero es que no puedes usar href en un li, porque es un atributo que corresponde a un enlace (a) que es lo que decíamos antes. Si quiere pasar datos, en HTML existen atributos data-*, que son personalizables:

Código HTML:

<li data-juego="juego_de_mesa">Juego de Mesa</li>
<li data-juego="sandwichera">Sandwichera</li>
 

A estos atributos, como digo, puedes ponerles el nombre que quieras, mientras tengan el formato data-*.

Puedes recoger los valores con data("juego"), por ejemplo:

Código Javascript:

$("li.me2").click(function(){
  grupo = $(this).data("juego")
})
 

Pero a las descripciones tendrás que ponerle algo para identificarlos. Puedes usar los mismos valores que usaste antes, y para que quede más fino usar otro data-* si quieres:

Código HTML:

<div class="descripcion" data-descripcion="juego_de_mesa"></div>
<div class="descripcion" data-descripcion="sandwichera"></div>
 

Y ahora muestras la descripción data-descripcion según qué data-juego se haya pulsado:

Código Javascript:

$("li.me2").click(function(){
  grupo = $(this).data("juego")
  $("div.descripcion[data-descripcion="+grupo+"]").fadeIn()
})
 

No sé si hay algún fallo debido a que hace mucho que no toco JavaScript y no me gusta JavaScript.

[AjarDeNauer]

Investigaré acerca del data-.. Gracias

Con respecto al href sabía que era un atributo de a. De hecho no sale en el desplegable de las etiqueta <li> sin embargo.. me funciona, por eso lo mantuve.

Porque si no... Qué recoge entonces attr() ? supuestamente le pasamos un identificador con el atributo href... así lo entendía yo

[AjarDeNauer]

Iniciado por pzin

Código HTML:

<li data-juego="juego_de_mesa">Juego de Mesa</li>
<li data-juego="sandwichera">Sandwichera</li>
 

Código Javascript:

$("li.me2").click(function(){
  grupo = $(this).data("juego")
})
 

Código HTML:

<div class="descripcion" data-descripcion="juego_de_mesa"></div>
<div class="descripcion" data-descripcion="sandwichera"></div>
 

Código Javascript:

$("li.me2").click(function(){
  grupo = $(this).data("juego")
  $("div.descripcion[data-descripcion="+grupo+"]").fadeIn()
})
 

Perfecto, me muestra los div's que se correspondien con el elemento de la lista pulsado:

Código Javascript:

$(document).ready(function(){
    
    $("li.me2").click(function(evento){
 
        var grupo = $(this).data("menu");
        $("div.descripcion[data-descripcion=" + grupo + "]").show();
        $("div.menu3[data-menu3=" + grupo +"]").show();
 
            })
})
 

Código HTML:

<ul>
    <li class="me2" data-menu="Sandwichera">Sandwichera</li>
    <li class="me2" data-menu="Juego_de_mesa">Juego de mesa</li>
</ul>
 
<div class="descripcion" data-descripcion="Sandwichera" style="display:none">En base a una sandwichera existente, estudio de mercado.. </div>
<div class="descripcion" data-descripcion="Juego_de_mesa" style="display:none">123456789</div>
 
 
<div class="menu3" data-menu3="Sandwichera" style="display:none">imagen 1imagen 1imagen 1imagen 1></div>
<div class="menu3" data-menu3="Juego_de_mesa" style="display:none">aguan a peich ajar de bore an de mor></div>
 

Gracias nuevamente