Afficher/Enlever un div onclick Résolu/Fermé

Question

Bonjour, Ma question est sûrement simple pour vous, J'ai créé des images, et quand on clique sur une image, on a une donnée sur la fenêtre à droite et quand on reclique à nouveau sur l'image, cette donnée disparait. Tout marche très bien sauf sur un point : Quand on clique sur plusieurs images à la fois, toutes les données apparaissent sur la même div alors qu'une seule donnée est nécessaire. Voici mon lien au cas où vous n'auriez pas compris : http://alexis-bienayme.fr/dota/# (Cliquer sur les 2 images à gauche) Voici mes codes : Dota

Merci d'avance Configuration: Windows 8 / Chrome 26.0.1410.64

Mihawk · Answer

Hello,

Pas de mystère : quand une image appelle l'affichage de sa partie dans la colonne de droite, il faut déjà qu'elle appelle les méthodes pour cacher toutes les autres !

Richieddy · Answer

J'utilise donc une méthode pour fermer toutes les autres parties du genre : 
 function slark() {
      var cible = document.getElementById('slark');
      document.getElementById('clock').style.display='none';
      document.getElementById('void').style.display='none';
      document.getElementById('jakiro').style.display='none';
      document.getElementById('tidehunter').style.display='none';
      document.getElementById('terrorblade').style.display='none';
      document.getElementById('rylai').style.display='none';
      document.getElementById('doom').style.display='none';
      document.getElementById('disruptor').style.display='none';
      document.getElementById('sven').style.display='none';
      document.getElementById('rhasta').style.display='none';
      if(cible.style.display != '') {
        cible.style.display = '';
      } else {
        cible.style.display = 'none';
      }
    }
    function clock() {
        var cible = document.getElementById('clock');
      document.getElementById('slark').style.display='none';
      document.getElementById('void').style.display='none';
      document.getElementById('jakiro').style.display='none';
      document.getElementById('tidehunter').style.display='none';
      document.getElementById('terrorblade').style.display='none';
      document.getElementById('rylai').style.display='none';
      document.getElementById('doom').style.display='none';
      document.getElementById('disruptor').style.display='none';
      document.getElementById('sven').style.display='none';
      document.getElementById('rhasta').style.display='none';
      if(cible.style.display != '') {
        cible.style.display = '';
      } else {
        cible.style.display = 'none';
      }
    }

la function slark et clock permettent d'ouvrir les parties slark et clock. Cependant j'utilise les methodes pour fermer les autres, ce n'est pas très joli je trouve, mais si on a un meilleur moyen je suis prenneur !

Mihawk · Answer

En fait pour être plus propre il aurait fallu nommer les div qui apparaissent/disparaissent avec des ID du genre "div1", "div2", "div3", etc... Et passer le numéro du div en paramètre de ta fonction clock() :   

Exemple presque complet :   


function clock(divId){  
   hideAll();  
   if (document.getElementById("div" + divId)){  
      document.getElementById("div" + divId).style.display = "";  
   } else {  
      alert ("La partie à afficher n'a pas été trouvée.");  
   }  
}  

function hideAll(){  
   var i=1;  
   while (document.getElementById("div" + i)){  
      document.getElementById("div" + i).style.display = "none";  
      i++;  
   }  
}  

Voilà, plus qu'à placer les div1, div2, div3, etc... Dans ton code HTML et à modifier les méthodes onclick() de tes images pour mettre onclick="clock(1);" ou onclick="clock(2);" etc...  

Amicalement,   
Pierre.

logisticien · Answer

Mwai ....

Perso j'aurai fait de l'ajax et à chaque clic j'aurai chargé les infos nécessaire sorti de la BDD =)

En plus ça économise la bande passante...

Richieddy · Answer

Effectivement, ça fonctionne ! Mon code est donc plus propre, je te remercie pour ton aide :)

Afficher/Enlever un div onclick

5 réponses

Discussions similaires