JQuery Traversing et code simple?

Question

D'accord, avant de poser cette question.Permettez-moi d'expliquer mon objectif: je veux écrire le plus de code possible possible et peut toujours avoir des tonnes de fonctionnalités en même temps.J'ai inventé cela comme «beau code» à moi-même et à vos collègues.

Voici le problème: je veux cliquer sur une case et un panneau pour s'effacer avec le contenu souhaité en fonction de la boîte que j'ai cliquée.Sauf que je ne peux pas utiliser deux classes et que je ne peux pas réutiliser les identifiants.

Voici le code: http://jsfiddle.net/2yr67/

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

J'avais deux idées qui me plairaient.

a) avoir un panneau s'estomper et le contenu remplir dans le panneau sur la base de laquelle la boîte "Maingrid" "click'ed B) avoir un panneau spécifique avec le contenu s'estomper, basé sur lequel "maingrid" a été sélectionné

Je ne vous demande pas de le faire pour moi, poussez-moi simplement vers la syntaxe nécessaire pour faire ce que je veux

Merci d'avance!

Answer 1

La première chose à faire est de déplacer vos éléments HTML de panneau plus proches des éléments maintrides.Cela vous permet de masquer / d'afficher les éléments corrects dans l'ordre.Avoir tous les panneaux de leur propre élément séparé vous fait que vous devez faire la manipulation DOM devrait avoir besoin de faire.Pour la simplicité, j'ai mis chaque panneau juste après l'élément maintride qu'il lui était associé.

Structure 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>

J'ai ajouté la classe du panneau pour avoir le même CSS que Maingrid, ainsi que la rendre invisible au début:

.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; 
}

Ceci disparaîtra l'élément actuel cliqué et disparaîtra dans l'élément du panneau suivant.

$('.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();
        });
    }); 

Il semble également y avoir un bogue où le Hover ne montre pas le texte sur le premier événement de la survolte.

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