Class.Name Javascript sur liste dynamique?

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par tryan, 12 Décembre 2011.

  1. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 239
    J'aime reçus:
    0
    Bonjour,

    Je bute sur un menu à onglet dynamique et notamment dans sur la fonction Javascript qui permet d'identifier le Class.Name :
    Code:
    function affiche(num){
        // Début de la numérotation
    	var i = 1; 
    	// Nom de l'id
    	var NomId = 'ouvre-'; 
    	var MonDiv;
    	// On boucle et on masque tout
    	while(( 
    	MonDiv = document.getElementById( NomId + (i++)))){
    	MonDiv.style.display = 'none';
    	}
    	//On affiche l'élément concerné
    	MonDiv = document.getElementById( NomId + num);
    	MonDiv.style.display = 'block';
    }
    
    Code:
    ....
    <li><a onclick="affiche(1);">teste</a></li>
    <li><a onclick="affiche(2);">teste 2</a></li>
    ....
    Je souhaites tout simplement que le "li" cliqué applique une class css qui indique que l'on se trouve sur ce "li" ... mais là, je sèche...
    Une idée ?
    Merci
     
  2. forty
    forty WRInaute passionné
    Inscrit:
    30 Octobre 2008
    Messages:
    1 929
    J'aime reçus:
    0
    essaye avec this.parentNode pour récupérer le parent du lien. Il faut peut-être passer en paramètre "this" avec affiche(this, 1).
     
  3. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 239
    J'aime reçus:
    0
    Merci pour ta réponse forty mais je dois avoué être une "burne" en JS alors ce que tu me dis est du chinois :(. J'ai lus sur le net à quoi servait "parentNode" mais de la à le mettre en application...
     
  4. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 884
    J'aime reçus:
    263
  5. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 239
    J'aime reçus:
    0
    Parce que j'aime la simplicité!
    Parce que j'aime bien comprendre un minimum ce que j'utilise!
    Parce que je préfère avoir 15 lignes de code qui me soit utiles plutôt que 9000!
     
  6. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 884
    J'aime reçus:
    263
  7. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 239
    J'aime reçus:
    0
    Merci pour le lien :).

    Je commence à comprendre doucement le truc...j'arrive pour le moment à changer la class css du "li" cliqué mais je ne parviens pas à faire en sorte qu'un seul élément affiche la dite class. Si je clique sur 2 "li" successivement, les 2 "li" garde la class css active au lieu d'un seul...
    Code:
    function affiche(element, num){
        // Début de la numérotation
    	var i = 1; 
    	// Nom de l'id
    	var NomId = 'ouvre-'; 
    	var MonDiv;
    	//Pour changer la class css
    	var changeclass;
    	//-------
    	// On boucle
    	while( 
    	MonDiv = document.getElementById( NomId + (i++))
    	//Fin boucle while
    	)
    	{
    	//on masque tout
    	MonDiv.style.display = 'none';
    	}
    	//On affiche l'élément concerné
    	MonDiv = document.getElementById( NomId + num);
    	MonDiv.style.display = 'block';
    //--------------------------------------------------
       alert("L'élément actuel est : " + element.parentNode.className);
    	changeclass = ( NomId + num);
    	alert("L'élement est maintenant égal à \"changeclass\" :" + changeclass);
    	if(element.parentNode.className == changeclass)
    {
    	element.parentNode.className="active";
        alert("l'élément parent passe à : " + element.parentNode.className);
    }
    
    //---------------------------------------------------
    }
    Une suggestion?
     
  8. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 196
    J'aime reçus:
    1
    J'ai pas dépouillé tout ton code mais si tu arrive a changer la class de la "li" active il faut que tu ajoute juste avant cela une itération qui met toutes les "li" a une class inactive.

    dans l'ordre tu dé-sélectionne tout et tu sélectionne ensuite.
     
  9. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 239
    J'aime reçus:
    0
    Tu n'aurais pas un exemple sous le coude parce plus ça va, plus je déprime ^^...
     
  10. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 196
    J'aime reçus:
    1
    Sans tenir compte du CSS lié aux différentes boxs que les onglets contrôlent et juste pour le principe en simplifiant au max ton code JavaScript et en restant dans l'idée de tes conventions de nommage :
    Code:
    <div id="onglets">
    <ul>
    	<li class="inactif" id="onglet-1"><a onclick="affiche(1);">teste 1</a></li>
    	<li class="inactif" id="onglet-2"><a onclick="affiche(2);">teste 2</a></li>
    	<li class="inactif" id="onglet-3"><a onclick="affiche(3);">teste 3</a></li>
    	<li class="inactif" id="onglet-4"><a onclick="affiche(4);">teste 4</a></li>
    </ul>
    </div>
    <div id="ouvre-1">1</div>
    <div id="ouvre-2">2</div>
    <div id="ouvre-3">3</div>
    <div id="ouvre-4">4</div>
    
    <script type="text/javascript">
    	affiche(1); // initialisation
    	
    	function affiche(num){
    	   // On boucle et on masque tout
    	   for(i=1;i<5;i++){
    			document.getElementById( 'ouvre-' + i).style.display = 'none';
    			document.getElementById('onglet-' + i).className = "inactif";
    	   }
    	   //On affiche l'élément concerné
    	   document.getElementById( 'ouvre-' + num).style.display = 'block';;
    	   document.getElementById('onglet-' + num).className = "actif";
    	}
    </script>
    
    <style type="text/css">
    .inactif{
    	background-color: red;
    }
    .actif{
    	background-color: blue;
    }
    </style>
     
  11. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 239
    J'aime reçus:
    0
    Merci zeb pour cet exemple :D :). Je dois avoué être un peut dégoûté par la "simplicité" de celui-ci alors que je m'arrache les tifs avec des "element.parentNode.className" et Cie :x .

    Bon, je vais tenté d'arranger ton code avec une boucle while() si c'est c'est possible...

    Note : je hais le JS

    Encore merci
     
  12. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 196
    J'aime reçus:
    1
    Tu peux aussi charger mootols, JQuery et j'en passe mais ça donnera pas plus simple. Mais si tu veux des effets "smart" c'est plus chiant.
    Je voie a ton avatar qu'il te reste quelques cheveux tout va bien alors ;-)
     
  13. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 239
    J'aime reçus:
    0
    C'est pas certains :mrgreen: .
    La j'essaye d'adapter ton code au mien en utilisant une boucle while afin d'ajouter autant de "li" que je veux sans être obligé de retoucher à la fonction à chaque ajout et je crois que je vais allé chercher une corde :D .

    Pour ce qui est de jquery et compagnie, je sais que c'est plus simple à mettre en place mais je ne vois pas l'utilité d'avoir une tonne de ligne de js alors que quelques une peuvent être largement suffisant.
     
  14. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 884
    J'aime reçus:
    263
    - Simplicité (Write Less, Do More)
    - Compatibilité accrue entre les différents navigateurs
    - C'est vrai que c'est pas rien à embarquer, mais avec les CDN c'est nettement réduit.
    - Communauté: rapports de bugs, support, plugins à la pelle, ...
    - ...

    Je n'avais jamais fait de JS (hors copier/coller :mrgreen:) avant de découvrir jQuery / scriptaculous / mootools, jQuery m'a séduit et a ouvert bien des horizons de par sa simplicité d'utilisation.
    Alors pr un bidouilleur comme toi (c'est pas péjoratif), je t'assure ça vaut le détour ;)
     
  15. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 196
    J'aime reçus:
    1
    :D Je savais que ça allait te faire réagir Spout.
    C'est d'ailleurs pour ça que j'ai ajouté que si l'objectif était d'avoir des effets "smart" le JavaScript à la mano ne suffisait pas.

    Pour le bidouilleur, je le prend surtout comme un compliment, la passion du code qui m'écarte des frameworks est en effet du a cette passion du code donc c'est pas du tout péjoratif pour moi :wink:

    Le seul truc qui me saoule et qui m'a toujours fait désinstaller les framework javascript c'est le poids des pages pour "juste un effet", mais il n'en reste pas moins que si un site complet a besoins d'effet de qualité ce genre d'outil s'avère un must c'est évident.
    mais bon c'est surement viscéral chez moi j'étais encore cet aprem en train de réfléchir pour virer sur un site une API JavaScript gérant des time line pourtant très bien foutues. Bref on ne se refait pas.
     
  16. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 239
    J'aime reçus:
    0
    @spout : pour la "simplicité d'utilisation", faut quand même sacrément avoir le nez dedans jusqu'aux chevilles.
    Quand je vois :
    Code:
    <script>
    	$(function() {
    		$( "#tabs" ).tabs();
    	});
    	</script>
    ...ça ne m'inspire pas beaucoup et encore moins quand je regarde le fichier "jquery" pour comprendre comment ça fonctionne.

    Ceci dit, je suis certains que tu as raison sur ce que tu dis mais en plus des raisons citées plus haut, comme je ne comprend pas, je n'utilise pas.
     
  17. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 196
    J'aime reçus:
    1
    arf ! j'ai fait le boulet j'ai pas vue que tu parlais a Tryan ...
     
Chargement...
Similar Threads - Class Javascript liste Forum Date
JAVASCRIPT, concaténation de classes? Développement d'un site Web ou d'une appli mobile 29 Novembre 2015
Déclassement sur requêtes et pays spécifiques? Crawl et indexation Google, sitemaps 11 Janvier 2020
Site google version classique Débuter en référencement 15 Décembre 2019
Google déclasse la home et n'affiche plus les méta TITLE et DESCR Problèmes de référencement spécifiques à vos sites 28 Octobre 2019
Multi-classement des produits e-commerce 22 Octobre 2019
Perte brutale du classement : https en cause ? Problèmes de référencement spécifiques à vos sites 14 Mai 2019
Besoin d'un avis VISUEL sur un site commerce "classique" Demandes d'avis et de conseils sur vos sites 6 Avril 2019
Google prend-il en compte les attributs Class et Id ? Débuter en référencement 17 Janvier 2019
Perte de classement depuis le 20 septembre Demandes d'avis et de conseils sur vos sites 28 Octobre 2018
Problème de classification sur Google (commande "related") Problèmes de référencement spécifiques à vos sites 3 Septembre 2018
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice