Javascript: Disparition DIV sauf un élement Résolu/Fermé

Question

Bonjour, 

Je cherche sur différent forum, et essaie depuis un moment de faire disparait un DIV (jusque là tout va bien) sauf un élément de ce DIV.

Je m'explique, j'ai un DIV qui contient plusieurs images, quand je clique sur une image je voudrais que les autres images disparaisse sauf celle que j'ai cliqué dessus, elle devrait rester et s'agrandir.

Mon problème apparait quand je veux faire disparaître les autres images.
Pour faire disparaitre les autres images, je fais un "Effect.Fade('content');" (effet de la librairie script.aculo.us), content étant l'ID de mon DIV, l'images sélectionnée s'agrandit un cours instant et disparait avec les autres images 1 seconde après.

Si vous voyez une façon de procéder pour résoudre mon problème, je vous remercie d'avance.

Bonne journée

Joro
Configuration: Windows 7 / Firefox 4.0

wyllyjon · Accepted Answer

Salut !

Si je comprends bien, tu as un div contenant toutes tes images ?

Si tu caches ton div, c'est normal que toutes les images contenues disparaissent également.

Ce que tu dois faire, c'est faire disparaître chaque image une à une.

Par exemple, en utilisant la librairie JQuery, avec le code : 


$('img.images').each(function(index, image)
{
    $(image).hide();
});


tu vas cacher toutes les images ayant comme classe "images".

Après, il faut gérer le fait de ne pas cacher l'image sur laquelle tu as cliqué, en faisant un test dans ton each par exemple.

Si t'as d'autres questions, n'hésites pas !

joro2117 · Answer

Salut,

Merci de ta réponse.

Aurais-tu une manière de le faire avec Script.aculo.us ? et le test dans mon each ressemblerais à "si cette image à été cliquer ne pas la cacher ?" comment puis-je traduire ceci en Javascript.

Bonne journée

wyllyjon · Answer

Salut ! Voilà un script qui fonctionne :

Il faut que tu mette un id sur ton image (unique pour chaque image, mais après, peut importe l'id, tu peux générer un nombre aléatoire si tu veux) qui va servir à comparer l'image cliquée et les autres images. Et il faut également une classe pour pouvoir récupérer l'ensemble des images (avec le selecteur $$('.images')) pour ensuite les cacher. Dans ce code, on utilise prototype qui normalement doit être livré avec scriptaculous (dans le dossier lib). Voilà, je pense que tu devrais pouvoir t'en sortir avec ça ! Si t'as d'autres questions, n'hésites pas !

joro2117 · Answer

Vraiment un très grand merci, tu as été génial.

J'ai encore une dernière question à te poser. Mes images s'affichent correctement, c'est OK et ceci grâce à toi.

Ma question:
si je veux rajouter un style, un effet, ou autres éléments sur mon image qui reste après le clique. 
( Par exemple dans mon cas, une image "d'un bouton back" à côter de l'image  qui rafraichirait la page afin de rétablir toutes les images. 

Comment devrais-je m'y prendre ?

wyllyjon · Answer

De rien, c'était avec plaisir :-D

Pour ton bouton, tu peux mettre un bouton n'importe où sur ta page avec un style="display:none" pour qu'il ne soit pas affiché sur la page avant de cliquer sur ton image.
Ensuite, dans ta fonction imageClick, tu récupère ton bouton, avec son id par exemple, et tu l'affiche.
Si tu veux qu'il reload ta page, tu peux l'utiliser comme ça : 

<input type="button" id="..." onclick="location.reload()"/>

Bonne fin de développement !

joro2117 · Answer

Ok, c'est tout bon.

Merci Wyllyjon, tu m'as beaucoup aidé si une fois je peux faire quelques choses pour toi...

A une prochaine

Bonne journée

wyllyjon · Answer

No pb ! Content d'avoir pu t'aider !
:-D

joro2117 · Answer

re,

Si 'tes encore là,
Tu sais comment faire pour interdire le clique multiple sur un lien ? enfaite autoriser que le clique simple, même le double clique ne dois pas être pris en compte.

Après j'arrête de t'embêter, promis (xD) !

Bon app

wyllyjon · Answer

Tu as un attribut onDblClick que tu peux mettre sur ton lien. Si tu veux que rien ne se passe, je pense que tu peux faire : Click Le premier click du double click sera cependant pris en compte comme un click sur le lien normal...

joro2117 · Answer

Je l'ai vu, cette méthode sur d'autre forum, mais elle ne fonctionne pas.

tu peux m'expliquer la boucle que tu m'as donner toute à l'heure je voudrais l'utiliser pour autre chose mais je ne sais pas comment l'utiliser.

$$(".images").each(function(obj, index)

wyllyjon · Answer

Ah ? En la testant chez moi, elle marche. Qd je fais un double click sur le lien, c'est bien appelé (FF3.6), et ça a l'air compatible IE aussi.

Dis-moi comment tu veux utiliser ce double click, peut-être que je pourrai t'aider.

Et le each, c'est simple :
$$(".images") : c'est le sélecteur, qui va récupérer tous les éléments sur lesquels tu vas boucler ; c'est un sélecteur CSS, donc '.' pour une classe, "#" pour un ID, etc. Tu peux mettre ('.images div') qui va récupérer tous les div sous les éléments ayant une classe image, par exemple.

Et après, pour chaque élément, le each va appeler la fonction que tu lui passe en paramètre, avec deux paramètres : 
  - l'élément 
  - son index dans l'ensemble des résultats de la sélection.

Au final, ça donne : 

$$(".images").each(function(obj, index){
     // Tu fais les traitements que tu veux sur l'élément obj.
});


La doc prototype : http://prototypejs.org/api/enumerable/each

joro2117 · Answer

Merci (encore).

Enfaite je veux autoriser un seul clique, parce que sur une image j'ai mit un onclick="mafonction()", et ensuite la fonction s'exécute, le seul problème c'est que si on clique plusieurs fois sur l'image, la fonction s'exécute plusieurs fois et je voudrais qu'elle s'exécute une seule fois.

wyllyjon · Answer

Si la fonction onDblClick ne marche pas chez toi (bizarre), tu peux aussi utiliser un système de variable que tu mets à true ou false pour savoir si tu es déjà rentré ou pas dans la fonction.
Si tu es déjà entré dans la fonction, tu fais un return; sans rien faire.

joro2117 · Answer

l'idée des variables est sympathiques, mais je testerais comment (cliquer ou non)?

if(cliquer ou non){    
    mafonction();
}else{
    return;
}

wyllyjon · Answer

Non, juste la première fois que tu passes dans ta fonction, tu change la valeur de ta variable, et la seconde fois, voyant que ta variable à changé, tu sors de ta fonction sans rien faire

joro2117 · Answer

en code sa donne ?

serieux je vois pas desolé

wyllyjon · Answer

var dejaEntre=false;  
function test()  
{  
    if (!dejaEntre)  
    {  
        dejaEntre = true;  
        // Traitement  
    }  
}  

Expert technologies web et java.

joro2117 · Answer

merci, c'est Ok,

Tu sais comment je peux faire pour afficher quelques chose qui est cacher. Je m'explique xD.
J'ai un premier lien qui cache toute un DIV, sauf une image.
Effect.Fade(monDiv);

Et un deuxième lien qui affiche ce que j'ai cacher au paravant toute en cachant l'image garder au par avant.

Pour ce faire, je fais 
Effect.Fade(monImageGarder) // pour qu'elle disparait

et je voudrais faire réapparaitre mon div.

alors je crée cette fonction, que j'utilise de cette manière

ShowEffect('monDiv'); //Pour réafficher mon div.

function ShowEffect(element) {
    new Effect.Appear(element, {
        duration : 2,
        from : 0,
        to : 1.0
    });
}

Mon problème c'est que la fonction ne fais pas apparaitre le DIV, et cette fonction devrais fonctionner car je les utiliser de cette façon dans un autre projet.

var retour= document.createElement('img');
retour.setAttribute('src', 'img/retour.png');
ShowEffect(spanBack.appendChild(back));

et là mon image apparait belle et bien grâce à la fonction ShowEffect, mais pas dans l'autre situation.

Aurais tu une solution ?

wyllyjon · Answer

Mince, je pensais t'avoir répondu, mais apparement pas...

Donc rien ne se raffiche tout simplement parce que dans le code qu'on a fait (le each), on n'a pas caché le div, mais les images.

Il te faut donc reprendre le each, et le modifier pour, au lieu de cacher les images, les rafficher !

joro2117 · Answer

alors cette ligne se transforme en quoi ?

$(obj).fade(); //ligne de code de la boucle.

Ceci ne fonctionne pas:
$(obj).ShowEffect(image);

ceci non plus:
ShowEffect.$(obj);

et ceci encore moins:
ShowEffect.(obj);

joro2117 · Answer

c'est bon j'ai réussit tout fonctionne merci beaucoup. T'es vraiment génial.
il fallait juste que je réaffiche chaque image merci merci merci * 10000

Aller a une prochaine

ciao

Javascript: Disparition DIV sauf un élement

21 réponses

Discussions similaires