[jQuery] Problème de "remplacement"

Et de boucle

Sujet résolu

12 novembre 2010 à 11:06:43

Bonjour !

Je me suis mis récemment au Javascript (à l'aide de la bibliothèque jQuery), et j'ai de légers soucis sur mon premier script.

Voici des screenshots de ce que j'ai fait :

Avant
Après

Voici le 1er souci :

Problème

Vous pouvez voir que les objets affichés se superposent, comment faire pour qu'ils se remplacent lorsque l'on clique sur un seconde élément?

Second souci : on ne peut afficher et cacher le contenu d'un élément qu'une seule fois, après, il faut actualiser la page pour le réafficher à nouveau, je pense qu'une boucle permettrait de corriger ça, mais comment?

Voilà le code :

$(function(){

    //crea01
    $(".crea01") .mouseover(function(){
        $(this) .stop() .fadeTo("normal", 0.6);
    })

    $(".crea01") .mouseout(function(){
        $(this) .stop() .fadeTo("normal", 1)
    })

    $(".crea01") .click(function(){
        $(".creaup01") .stop() .show("normal", function(){
            $(".creatxt01") .stop() .show("normal",function(){
                $(".crea01") .click(function(){
                    $(".creaup01") .stop() .hide("normal");
                        $(".creatxt01") .stop() .hide("normal");

                })
            })
        })
    })
    //crea02
    $(".crea02") .mouseover(function(){
        $(this) .stop() .fadeTo("normal", 0.6);
    })

    $(".crea02") .mouseout(function(){
        $(this) .stop() .fadeTo("normal", 1)
    })

    $(".crea02") .click(function(){
        $(".creaup02") .stop() .show("normal", function(){
            $(".creatxt02") .stop() .show("normal",function(){
                $(".crea02") .click(function(){
                    $(".creaup02") .stop() .hide("normal");
                        $(".creatxt02") .stop() .hide("normal");

                })
            })
        })
    })
});

Merci de votre aide

EDIT : J'ai trouvé une solution pour le premier problème mais le rendu est "brutal", vous pouvez le tester ici : http://zouox.no-ip.org/portfolio/personal_work.php

Golmote

12 novembre 2010 à 13:36:47

Le problème... c'est la conception du truc.

Déjà, tu utilises pour chaque élément (miniature, texte, image) une classe CSS unique.

Ne serait-il pas plus simple de leur attribuer une class "crea", "creaup" et "creatxt". Quitte à leur donner un id unique si vraiment tu y trouves une utilité.

Partant du principe que tu as les classes sus-citées, ton code peut devenir générique.

Par exemple quelque chose comme ça :

$(function () {

    /* On stocke quelques collections qui vont nous reservir */
    var $crea = $(".crea"),
        $creaup = $(".creaup"),
        $creatxt = $(".creatxt");

    /* Quand un élément de la class ".crea" est survolé */
    $crea.mouseover(function () {
        $(this).stop().fadeTo("normal", 0.6);

    /* Quand un élément de la class ".crea" n'est plus survolé */
    }).mouseout(function () {
        $(this).stop().fadeTo("normal", 1);

    /* Pour chaque élément ".crea" */
    }).each(function (nb) { // On a en paramètre de la fonction l'index de l'élément
    
        /* Lors du click */
        $(this).click(function () {
        
            /* Si l'élément ".creaup" correspondand à l'élément cliqué est visible */
            if ($creaup.eq(nb).is(":visible")) {
                /* On le cache ainsi que le texte qui va avec */
                $creaup.eq(nb).stop().hide("normal", function () {
                    $creatxt.eq(nb).stop().hide("normal");
                });
                
            /* Sinon si un élément ".creaup" est visible */
            } else if ($(".creaup:visible").length > 0) {
                /* On cache l'élément visible, ainsi que son texte */
                $(".creaup:visible").stop().hide("normal", function () {
                    $(".creatxt:visible").stop().hide("normal", function () {
                        /* Puis on affiche les éléments correspondant à notre élément cliqué */
                        $creaup.eq(nb).stop().show("normal", function () {
                            $creatxt.eq(nb).stop().show("normal");
                        });
                    });
                });
                
            /* Sinon (aucun élément ".creaup" n'est visible)
            } else {
                /* On affiche simplement les éléments correspondants à notre élément cliqué */
                $creaup.eq(nb).stop().show("normal", function () {
                    $creatxt.eq(nb).stop().show("normal");
                });
            }
        });
    })
});

ZouoX

12 novembre 2010 à 18:18:23

Merci beaucoup, ça marche parfaitement

Par contre j'ai dû corriger une petite erreur : ligne 41 le commentaire n'était pas fermé, volontaire pour me faire réfléchir?

EDIT : Je n'ai pas compris à quoi servait le ' .eq(nb) ', pourriez-vous m'éclairer? :euh:

Merci

Golmote

12 novembre 2010 à 19:40:22

Désolé pour le commentaire. Disons que c'était fait exprès, oui

Le eq(nb) ça sert à récupérer le (nb+1)ième de la collection d'objets.

ZouoX

13 novembre 2010 à 1:11:00

Merci beaucoup

J'vais décortiquer ce code jusqu'à tout comprendre et refaire d'autres fonctions. Une fois qu'on a saisi le paradigme, ça va tout seul !

Golmote

13 novembre 2010 à 3:12:27

Voilà

N'hésite pas à poser d'autres questions si besoin est.