Échanger les classes de deux éléments

Question

28 Dec 2012 à 16:53

Bonjour,
je créer une interface qui à moment donner nécessite des changements de style des éléments. Certains éléments doivent échanger leur style, pour ceci, j'inscris leur style dans mon css et leur attribut une classe, pour échanger leur style il me suffit alors d'échanger leur classe via js.
Seulement, je rencontre quelques difficultés à échanger leur classe. D'abord car je ne sais pas "couramment" coder en javascript, et ensuite, parce que ma fonction ne fonctionne pas:

<html>
	<head>
		<meta charset="UTF-8"/>
		<title>GesTube</title>
		<link rel="stylesheet" type="text/css" href="./style.css"/>
	</head>
	<body>
		<div class="content">
			<div class="covers-content">
				<div onclick="tofront('-4')" id="c1" class="c-4"></div>
				<div onclick="tofront('4')" id="c2" class="c4"></div>
				<div onclick="tofront('-3')" id="c3" class="c-3"></div>
				<div onclick="tofront('3')" id="c4" class="c3"></div>
				<div onclick="tofront('-2')" id="c5" class="c-2"></div>
				<div onclick="tofront('2')" id="c6" class="c2"></div>
				<div onclick="tofront('-1')" id="c7" class="c-1"></div>
				<div onclick="tofront('1')" id="c8" class="c1"></div>
				<div onclick="tofront('0')" id="c9" class="c0"></div>
			</div>
		</div>
	</body>
</html>

function tofront(class) {
	var element1=document.getElementClassName("c"+class);
	var element2=document.getElementClassName("c0");
	element1.className="c0";
	element2.className="c"+class;
}

Voilà, j'espère que vous saurez m'éclairer, merci.

renard13

28 Dec 2012 à 18:00

Salut,
Je crois que ton argument de fonction class est un mot réservé en javascript.
Essaye myClass ou autre.
"getElementClassName"...........> A vérifier mais je crois que ça n'existe pas, en tous cas je ne l'ai jamais vu.
Pour mettre ton événement à ton code javascript :
Tu cible ta div "<div class="covers-content">".
Tu prend toute les div.
Tu rajoute dans une boucle l’événement onclick avec .onclick ou addEventListener (+attachEvent pour Ie<9).
Aprés au lieux de faire:

function tofront(class) {
	var element1=document.getElementClassName("c"+class);
	var element2=document.getElementClassName("c0");
	element1.className="c0";
	element2.className="c"+class;
}

Tu peux simplifier:
Tu fais une boucle qui vérifie si il existe une div avec "c0" si oui tu lui mets la class de celui sur lequel l'utilisateur a cliquer. Exemple, imaginons que tu as mis un id="conteneur" à la div qui englobe tous tes div qui vont recevoir l’événement.


(function(){
var cible = document.getElementById('conteneur'),
div = cible.getElementsByTagName('div'),
div_l = div.length;
for(var i=0;i<div_l;i++){
 add_event('click', div[i], tofront);
}
var add_event = function(evenement, element, fonction){
 if(element.attachEvent){
  element.attachEvent('on'+evenement, fonction);
 }
 else{
  element.addEventListener(evenement, fonction, false);
 }
}
function tofront(e) {
  var element = e.target || e.srcElement;
  for(var i=0;i<div_l;i++){
    if(div[i].className == 'c0'){
     div[i].className = element.className;
    }
   element.className = 'c0';
  }
}();
}

Il y a peut être des fautes de frappes.
Je mets tous dans une fonction anonyme, je cible la div conteneur et je récupère tous les éléments div avec getElementsByTagName.
Je parcours le résultat avec une boucle for et ajoute l’événement click à toutes les div grace à la fonction add_event (permet d'ajouter un événement quelque soit le navigateur).
Voici un très bon lien :
http://www.alsacreations.com/article/lire/578-La-gestion-des-evenements-en-JavaScript.html
Enfin la fonction tofront(e). élément récupère l’élément sur lequel l'utilisateur à cliqué.
On refait une boucle pour vérifier si il existe une class c0 si oui on lui donne la classs de la div sur lequel l'utilisateur a cliquer. Et on mets à élément la class c0.

Il y a plusieurs façon de faire. ++++[/i][/i][/i]

juliendargelos

28 Dec 2012 à 18:21

Merci de me venir en aide, tout d'abord, et après vérification, "GetElementClassName" existe, à l'exception d'une petite erreur à présent corrigée: "GetElementByClassName" (voir ceci). Malheureusement ça ne résout pas mon problème, tout comme la modification de class par myclass. Je te suis vraiment reconnaissant de chercher ainsi à m'aider mais... je ne comprend vraiment rien au js, et ton code me semble un peu lourd en comparaison à celui d'origine. Trouverais-tu un moyen de faire fonctionner correctement ma fonction sans trop t'en éloigner ?
Je te remercie encore de ton aide.

Hum, ensuite, je t'avoue que mes connaissances furent acquises assez peu conventionnellement. En fait, je n'ai jamais lu de cours de quoique ce soit tout simplement car je n'y comprend vraiment rien: j'ai appris le html et le css en consultant des codes sources, et j'ai appris le php en personnalisant Wordpress. J'essaye quand même de consulter ce cours mais je ne pense pas que j'en retiendrais quelque chose...
Modifié par xXjujo002Xx (28 Dec 2012 - 18:31)

adrien881

28 Dec 2012 à 18:32

Bonsoir,

je te conseille d’utiliser une bibliothèque comme jquery car dès que tu veux récupérer des attributs d’une balise HTML (c’est le cas ici) tu vas galérer pour rendre compatible les .attributes dans les anciennes versions d’internet Explorer.

Tu pourrais par exemple faire comme ceci
fichier echangerClasses.html

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>Échanger les classes</title>
	<link href="echangerClasses.css" rel="stylesheet" type="text/css"/>
</head>
<body>
	<div class="echangerClasses0" id="echangerClasses0"/>Avec bordure rouge au départ sans bordure à la fin</div>
	<div class="echangerClasses1" id="echangerClasses1"/>Sans bordure au départ avec bordure rouge à la fin</div>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script type="text/javascript" src="echangerClasses.js"></script>
</body>

fichier echangerClasses.css

.echangerClasses0 {
	border:medium solid red
}

fichier echangerClasses.js

$(function(){
	/**
	 * Échange les classes de deux objets
	 * 
	 * @param obj0 objet HTML
	 * @param obj1 objet HTML
	 */
	function echangerClasses(obj0, obj1) {
		"use strict";
		var tampon;
		tampon = obj1.attr('class');
		obj1.attr('class', obj0.attr('class'));
		obj0.attr('class', tampon);
	}
	echangerClasses($('#echangerClasses0'), $('#echangerClasses1'));
});

renard13

28 Dec 2012 à 19:03

Ok, pour getElementByClassName.
ensuite il faut aussi régler le problème de element1 et element2.
getElementByClassName => renvoi une NodeList en live.
Se met automatiquement à jour pour refléter l'état actuel du document.
GetElementsByClassName renvoie une "live nodelist", i.e. elle se met à jour quand tu modifies des objets.
Exemple: au départ il renvoie une liste de trois éléments A, B et C. Tu commences avec i=0, tu vires la classe de A. La liste ne contient maintenant plus que B et C
En clair, il faut faire element[0] pour le premier element trouver, element[1] pour le deuxième...
Par contre je ne pense pas que ce soit la meilleur façon.
Je ne pense pas que jquery soit utile si tu ne cherche qu'a faire ça. Télécharger la librairie pour cela fait beaucoup.
++++
Pour commencer javascript, il existe un super tuto:
http://www.siteduzero.com/tutoriel-3-309961-dynamisez-vos-sites-web-avec-javascript.html
Modifié par renard13 (28 Dec 2012 - 19:04)

juliendargelos

28 Dec 2012 à 19:08

Hum, je vais voir tout ça. Pour précision, je ne me fais aucun soucis pour la compatibilité IE: cette interface est destinée à une application reposant sur le moteur webkit, donc pas de soucis.

juliendargelos

28 Dec 2012 à 21:21

Bon, finalement j'ai trouvé la solution seul, comme dis au début, j'utilisais certaines variables réservées, et certaines fonctions... inexistantes. Voilà comment j'ai fais:

<html>
	<head>
		<meta charset="UTF-8"/>
		<title>GesTube</title>
		<link rel="stylesheet" type="text/css" href="./style.css"/>
	</head>
	<body>
		<div class="content">
			<div class="covers-content">
				<div onclick="ToFront(this); ToTarget(this);" class="cover" style="background-image:url('covers/1.jpg');" id="c-4"></div>
				<div onclick="ToFront(this); ToTarget(this);" class="cover" style="background-image:url('covers/2.jpg');" id="c4"></div>
				<div onclick="ToFront(this); ToTarget(this);" class="cover" style="background-image:url('covers/3.jpg');" id="c-3"></div>
				<div onclick="ToFront(this); ToTarget(this);" class="cover" style="background-image:url('covers/4.jpg');" id="c3"></div>
				<div onclick="ToFront(this); ToTarget(this);" class="cover" style="background-image:url('covers/5.jpg');" id="c-2"></div>
				<div onclick="ToFront(this); ToTarget(this);" class="cover" style="background-image:url('covers/6.jpg');" id="c2"></div>
				<div onclick="ToFront(this); ToTarget(this);" class="cover" style="background-image:url('covers/7.jpg');" id="c-1"></div>
				<div onclick="ToFront(this); ToTarget(this);" class="cover" style="background-image:url('covers/8.jpg');" id="c1"></div>
				<div onclick="ToFront(this); ToTarget(this);" class="cover" style="background-image:url('covers/9.jpg');" id="c0"></div>
			</div>
		</div>
	</body>
	<script language="javascript">
		function ToFront(cid) {
			var el1=document.getElementById(cid.id);
			var el2=document.getElementById('c0');
			el2.id=cid.id;
			el1.id='c0';
		}
		function ToTarget(ElementToTarget){
			window.location.href='#'+ElementToTarget.id;
		}
	</script>
</html>

body {
	background:url('./medias/bg-gradient.png') no-repeat center center, url('./medias/bg.png');
	background-size:100% 100%, 100px 100px;
	margin:0;
}

.content {
	width:1110px;
	height:600px;
	top:50%;
	left:50%;
	margin:-300px 0 0 -555px;
	position:relative;
}

.covers-content {
	width:500px;
	height:600px;
}

.cover {
	background-repeat:no-repeat;
	background-size:180px auto;
	background-position:center center;
	width:180px;
	height:240px;
	top:50%;
	left:180px;
	margin:-100px 0 0 0;
	border-top:1px solid rgba(255,255,255,0.1);
	border-radius:2px;
	position:absolute;
	-webkit-transition:0.3s;
}

.cover:target {
	-webkit-animation:ToFront 0.3s;
}

#c-4 {
	margin:-230px 0 0 -130px;
	box-shadow:0 1px 4px #000;
	z-index:1;
	-webkit-transform:rotate(-16deg) scale(0.8);
}

#c-3 {
	margin:-200px 0 0 -100px;
	box-shadow:0 1px 6px #000;
	z-index:2;
	-webkit-transform:rotate(-12deg) scale(0.85);
}

#c-2 {
	margin:-170px 0 0 -70px;
	box-shadow:0 1px 8px #000;
	z-index:3;
	-webkit-transform:rotate(-8deg) scale(0.9);
}

#c-1 {
	margin:-130px 0 0 -30px;
	box-shadow:0 1px 10px #000;
	z-index:4;
	-webkit-transform:rotate(-4deg) scale(0.95);
}

#c0 {
	margin:-100px 0 0 0;
	box-shadow:0 1px 12px #000;
	z-index:5;
	-webkit-transform:rotate(0deg) scale(1);
}

#c1 {
	margin:-70px 0 0 30px;
	box-shadow:0 1px 10px #000;
	z-index:4;
	-webkit-transform:rotate(-4deg) scale(0.95);
}

#c2 {
	margin:-40px 0 0 70px;
	box-shadow:0 1px 8px #000;
	z-index:3;
	-webkit-transform:rotate(-8deg) scale(0.9);
}

#c3 {
	margin:-10px 0 0 100px;
	box-shadow:0 1px 6px #000;
	z-index:2;
	-webkit-transform:rotate(-12deg) scale(0.85);
}

#c4 {
	margin:20px 0 0 130px;
	box-shadow:0 1px 4px #000;
	z-index:1;
	-webkit-transform:rotate(-16deg) scale(0.8);
}

@-webkit-keyframes ToFront {
	0% {
		opacity:1;
	}
	
	50% {
		opacity:0.4;
	}
	
	100% {
		opacity:1;
	}
}

function ToFront(cid) {
			var el1=document.getElementById(cid.id);
			var el2=document.getElementById('c0');
			el2.id=cid.id;
			el1.id='c0';
		}
		function ToTarget(ElementToTarget){
			window.location.href='#'+ElementToTarget.id;
		}

Le résultat est là si ça vous intéresse (à tester avec webkit bien sûr):
http://www.juliendargelos.alwaysdata.net/GesTube/
Merci de votre aide
Modifié par xXjujo002Xx (28 Dec 2012 - 21:23)

renard13

7 Jan 2013 à 18:54

Salut,
Tu n'as besoin de deux fonctions, tu peux réunir les 2:


                function ToFront(cid) {
			var el1=document.getElementById(cid.id);
			var el2=document.getElementById('c0');
			el2.id=cid.id;
			el1.id='c0';
			window.location.href='#'+cid.id;
		}

Sinon en attribuant tes évenements par code et non directement dans le html ça te permettra de mettre à jour plus facilement.
La si tu veux changer qque chose, tu est obliger de le faire pour chaque ligne avec un onclick. Voici un exemple de code(pas pour Ie) :


// <div class="covers-content" id="conteneur">
var element = document.getElementById('conteneur'), 
// On récupére les div
div = element.getelementsByName('div'),
div_L = div.length;
for(var i=0;i<div_L;i++){
// On attribut l'evenement
 div[i].addEventListener('clcik', function(e){
// on récupère la div avec id="c0"
  var cible = document.getElementById('c0');
  var ref = e.target.id;
// On change l'id
  cible.id = ref ;
  e.target.id = 'c0';
  window.location.href='#'+ref ;
},false);
};
}

+++[/i]

Sujet clos

JavaScript, DOM et API Web HTML5

Échanger les classes de deux éléments