JQUERY TRAVERSIONES Y CÓDIGO SIMPLE?

Question

Bien, antes de hacer esta pregunta.Permítanme explicar mi objetivo: quiero escribir el menor código posible, y aún así podremos tener toneladas de funcionalidad al mismo tiempo.Me he acuñado esto como 'hermoso código' para mí y sus colegas.

Aquí está el problema: quiero hacer clic en un cuadro, y un panel para desvanecerse con el contenido deseado según la casilla.Excepto que no puedo usar dos clases y no puedo reutilizar la identificación.

Aquí está el código: http://jsfiddle.net/2yr67/

$('.maingrid').click(function(){
    //'maingrid' fade out
    //'panel' fade in with proper content
});

Tuve dos ideas que me complacerían.

a) Haga que un panel se desvanezca, y el contenido se rellene en el panel en función de la casilla 'Maingrid' que fue 'click' B) tener un panel específico con el contenido que se desvanece, basado en el cual se seleccionó 'Maingrid'

No le estoy pidiendo que lo hagas por mí, simplemente empujarme hacia la sintaxis necesaria para hacer lo que quiero

¡Gracias de antemano!

Answer 1

Lo primero que debe hacer es mover el elemento HTML del panel más cerca de los elementos de Maingrid.Esto le permite ocultar / mostrar los elementos correctos en orden.Tener todos los paneles en su propio elemento separado hace que usted haga la manipulación de DOM no debería tener que hacerlo.Para simplificar, pongo cada panel justo después del elemento maingrid que estuvo asociado con él.

estructura HTML

<div class=".mainContainer">
   <div class='maingrid'></div>
   <div class='panel'></div>
   <div class='maingrid'></div>
   <div class='panel'></div>
   <div class='maingrid'></div>
   <div class='panel'></div>
   <div class='maingrid'></div>
   <div class='panel'></div>
</div>

Añadido la clase del panel para tener el mismo CSS que Maingrid, así como para que sea invisible al inicio:

.maingrid, .panel {
    height: 345px;
    width: 345px;
    float: left;
    /* [disabled]background-color: #000; */
    margin-top: 5px;
    margin-right: 5px;
    cursor: pointer;
    overflow: hidden;
}
.panel{
    display:none;
    color:white; 
}

Esto se desvanecerá, se hizo clic en el elemento actual y se desvanecerá en el elemento del siguiente panel.

$('.maingrid').click(function(){
        var $that = $(this);
        $(this).fadeOut(function(){  //This will wait until the fadeOut is done before attempting to fadeIn.
            $that.next().fadeIn();
        });
    });
    $('.panel').click(function(){
        var $that = $(this);
        $(this).fadeOut(function(){
            $that.prev().fadeIn();
        });
    }); 

También parece haber un error en el que el funcionamiento no muestra el texto en el primer evento de flujo.

jsfiddle: http://jsfiddle.net/mdjfe/