JQuery TRAVERSING E CODICE SEMPLICE?

Question

Okay, prima di fare questa domanda.Lasciami spiegare il mio obiettivo: voglio scrivere come piccolo codice il più possibile, e continuare a avere tonnellate di funzionalità allo stesso tempo.Ho coniato questo come "bel codice" a me stesso e ai colleghi.

Ecco il problema: Voglio fare clic su una scatola e un pannello per svanire con il contenuto desiderato in base a quale scatola ho fatto clic.Tranne che non posso usare due classi e non posso riutilizzare l'ID.

Ecco il codice: http://jsfiddle.net/2yR67/

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

.

Ho avuto due idee che mi farebbero bene.

a) Avere un pannello si sbiadisce e il contenuto si riempie nel pannello in base alla casella "Mainingrid" che è stata "cliccata B) Avere un pannello specifico con il contenuto di dissolvenza, in base a quale "Mainingrid" è stato selezionato

Non ti sto chiedendo di farlo per me, semplicemente spingimi verso la sintassi necessaria per fare ciò che voglio

Grazie in anticipo!

Answer 1

La prima cosa da fare è spostare i tuoi elementi HTML del pannello più vicini agli elementi di mainingrid.Ciò consente di nascondere / mostrare gli elementi corretti in ordine.Avere tutti i pannelli nel proprio elemento separato ti fa pagare la manipolazione Dom non dovrebbe essere necessario fare.Per semplicità, metto ogni pannello subito dopo l'elemento di mainingrid che è stato associato ad esso.

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

.

Ho aggiunto la classe del pannello per avere lo stesso CSS come Mainingrid, oltre a renderlo invisibile all'inizio:

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

.

Si sbiadisce l'elemento corrente cliccato e svanisce nell'elemento del pannello successivo.

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

.

Sembra anche essere un bug in cui il mouse non mostra il testo sul primo evento del mouse.

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