Contenu | Rechercher | Menus

Annonce

Si vous avez des soucis pour rester connecté, déconnectez-vous puis reconnectez-vous depuis ce lien en cochant la case
Me connecter automatiquement lors de mes prochaines visites.

À propos de l'équipe du forum.

Pages : 1

#1 Le 14/02/2013, à 15:47

Morgiver

[RESOLU - Javascript - jQuery] Selection de div indexés

Bonjour smile

SUJET TOTALEMENT RESOLU :
Pour voir le code fonctionnel se référer au cinquième post.

Le code suivant fonctionne, mais n'est pas en accord avec la norme étant donné qu'il traite plusieurs id qui se répète.

$(function() {
	$('.mission').on('mouseover', function() {
		var id = $(this).attr('id');
	
		$('.Details[id="'+id+'"]').on('click', function() {
			$('.dossierMission[id="'+id+'"]').show('slow');
		});
		$('.dossierMission[id="'+id+'"]').on('click', function() {
			$('.dossierMission[id="'+id+'"]').hide(1000);
		});
	});
});

J'ai un soucis avec un bout de Javascript et jQuery.

J'aimerais faire une liste dont les élément s'agrandissent ou se réduisent si on clic dessus.
Pour l'instant ça fonctionne, sauf que ce sont tous les éléments qui s'agrandissent ou se réduisent en même temps.
Tout se passe evidemment dans le bout de javascript, en fait, utilisant des classes, je n'arrive pas à les identifiée une par une.
Tout ce que j'arrive à faire c'est récupérer leur identifiant, mais je n'arrive pas à l'intégrer.

Voici le Javascript :

$(function() {
	$('.mission').on('mouseover', function() {
		var id = $(this).attr('id');
	
		$('.Details').on('click', function() {
			$('.dossierMission').show('slow');
		});
		$('.dossierMission').on('click', function() {
			$('.dossierMission').hide(1000);
		});
	});
});

Comme vous pouvez le voir, j'ai une variable "id", qui me permet de savoir dans quelle mission on est. Seulement voilà, je n'arrive pas à intégré cet id à la class "Details" ni à la classe "dossierMission" qui ont le même id que "mission".

J'ai tenter un test de concaténation, mais j'me plante lourdement, et je n'arrive toujours pas à faire un truc dans le genre :

$('.dossierMission[id="1"]').on('click', function() { $('.dossierMission').hide(1000); });

Voilà le HTML et le CSS si vous voulez faire un test :

Le code Html :

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="../design/css/mission.css" />
</head>
<body>
	
	<div id="listeMission">
		<div class="mission" id="1">
			<div class="elementListeMission">
				<div class="titreMission">Titre : <span class="dataTitre">Mission 1</span></div>
				<button class="Details" id="1">Details de mission</button>
				<button class="Supprimer">Supprimer la mission</button>
				<button class="Valider">Valider la mission</button>
				<div class="blank"></div>
			</div>
			<div class="dossierMission" id="1">
				<div class="identifiantMission">
					<div class="titreMission">Titre : <span class="dataTitre">Mission 1</span></div>
					<div class="numeroMission">N° de Mission : #1</div>
				</div>
				<div class="dateMission">
					<div class="debutMission">Date de début de mission : <span class="dataDateDebut">01/02/2013</span></div>
					<div class="finMission">Date de fin de mission : <span class="dataDateDebut">01/03/2013</span></div>
				</div>
				<div class="blank"></div>
				<div class="objectifMission">Objectif de mission : <div class="dataObjectif">Etablir une panneau de mission.</div></div>
				<div class="infoMission">
					<div class="tributaireMission">Tributaire de mission : <span class="dataTributaire">Morgan</span></div>
					<div class="statusMission">Status de la mission : <span class="dataStatus">En cours</span></div>
				</div>
				<div class="blank"></div>
				<div class="rapportMission">
					Rapport de Mission :<div class="dataRapport">Le rapport doit être rédigé.</div>
				</div>
			</div>
		</div>
		<div class="mission" id="2">
			<div class="elementListeMission">
				<div class="titreMission">Titre : <span class="dataTitre">Mission 2</span></div>
				<button class="Details" id="2">Details de mission</button>
				<button class="Supprimer">Supprimer la mission</button>
				<button class="Valider">Valider la mission</button>
				<div class="blank"></div>
			</div>
			<div class="dossierMission" id="2">
				<div class="identifiantMission">
					<div class="titreMission">Titre : <span class="dataTitre">Mission 2</span></div>
					<div class="numeroMission">N° de Mission : #2</div>
				</div>
				<div class="dateMission">
					<div class="debutMission">Date de début de mission : <span class="dataDateDebut">01/02/2013</span></div>
					<div class="finMission">Date de fin de mission : <span class="dataDateDebut">01/03/2013</span></div>
				</div>
				<div class="blank"></div>
				<div class="objectifMission">Objectif de mission : <div class="dataObjectif">Etablir une panneau de mission.</div></div>
				<div class="infoMission">
					<div class="tributaireMission">Tributaire de mission : <span class="dataTributaire">Morgan</span></div>
					<div class="statusMission">Status de la mission : <span class="dataStatus">En cours</span></div>
				</div>
				<div class="blank"></div>
				<div class="rapportMission">
					Rapport de Mission :<div class="dataRapport">Le rapport doit être rédigé.</div>
				</div>
			</div>
		</div>
		<div class="mission" id="3">
			<div class="elementListeMission">
				<div class="titreMission">Titre : <span class="dataTitre">Mission 3</span></div>
				<button class="Details" id="3">Details de mission</button>
				<button class="Supprimer">Supprimer la mission</button>
				<button class="Valider">Valider la mission</button>
				<div class="blank"></div>
			</div>
			<div class="dossierMission" id="3">
				<div class="identifiantMission">
					<div class="titreMission">Titre : <span class="dataTitre">Mission 3</span></div>
					<div class="numeroMission">N° de Mission : #3</div>
				</div>
				<div class="dateMission">
					<div class="debutMission">Date de début de mission : <span class="dataDateDebut">01/02/2013</span></div>
					<div class="finMission">Date de fin de mission : <span class="dataDateDebut">01/03/2013</span></div>
				</div>
				<div class="blank"></div>
				<div class="objectifMission">Objectif de mission : <div class="dataObjectif">Etablir une panneau de mission.</div></div>
				<div class="infoMission">
					<div class="tributaireMission">Tributaire de mission : <span class="dataTributaire">Morgan</span></div>
					<div class="statusMission">Status de la mission : <span class="dataStatus">En cours</span></div>
				</div>
				<div class="blank"></div>
				<div class="rapportMission">
					Rapport de Mission :<div class="dataRapport">Le rapport doit être rédigé.</div>
				</div>
			</div>
		</div>
		<div class="mission" id="4">
			<div class="elementListeMission">
				<div class="titreMission">Titre : <span class="dataTitre">Mission 4</span></div>
				<button class="Details" id="4">Details de mission</button>
				<button class="Supprimer">Supprimer la mission</button>
				<button class="Valider">Valider la mission</button>
				<div class="blank"></div>
			</div>
			<div class="dossierMission" id="4">
				<div class="identifiantMission">
					<div class="titreMission">Titre : <span class="dataTitre">Mission 4</span></div>
					<div class="numeroMission">N° de Mission : #4</div>
				</div>
				<div class="dateMission">
					<div class="debutMission">Date de début de mission : <span class="dataDateDebut">01/02/2013</span></div>
					<div class="finMission">Date de fin de mission : <span class="dataDateDebut">01/03/2013</span></div>
				</div>
				<div class="blank"></div>
				<div class="objectifMission">Objectif de mission : <div class="dataObjectif">Etablir une panneau de mission.</div></div>
				<div class="infoMission">
					<div class="tributaireMission">Tributaire de mission : <span class="dataTributaire">Morgan</span></div>
					<div class="statusMission">Status de la mission : <span class="dataStatus">En cours</span></div>
				</div>
				<div class="blank"></div>
				<div class="rapportMission">
					Rapport de Mission :<div class="dataRapport">Le rapport doit être rédigé.</div>
				</div>
			</div>
		</div>
	</div>

	<script src="../include/javascript/jquery/jquery.js"></script>
	<script src="../include/javascript/form-mission.js"></script>
</body>

</html>

Et enfin le CSS :

#listeMission {
	padding: 5px;
	background: #b1b1b1;
	border: 1px solid black;
}

.mission {
	margin-top: 5px;
	padding: 5px;
	background: #4c8da2;
	border: 1px solid black;
	clear: both;
}

.elementListeMission {
	padding: 5px;
	background: #5b91c3;
	border: 1px solid black;
}

.dossierMission {
	display: none;
	margin: 5px;
	padding: 5px; 
	background: #5b91c3;
	border: 1px solid black;
}

.identifiantMission {
	padding: 5px;
}

.titreMission {
	float: left;
	min-width: 250px;
	padding: 5px;
	background: #efefef;
	border: 1px solid black;
}

.numeroMission {
	float: right;
	padding: 5px;
	background: #efefef;
	border: 1px solid black;
}

.dateMission {
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 5px;
	clear: both;
}

.debutMission {
	float: left;
	padding: 5px;
	background: #efefef;
	border: 1px solid black;
}

.finMission {
	float: right;
	padding: 5px;
	background: #efefef;
	border: 1px solid black;
}

.objectifMission {
	margin: 5px;
	padding: 5px;
	background: #efefef;
	border: 1px solid black;
	clear: both;
}

.infoMission {
	margin-top: 5px;
	padding: 5px;
}

.tributaireMission {
	float: left;
	padding: 5px;
	background: #efefef;
	border: 1px solid black;
}

.statusMission {
	float: right;
	padding: 5px;
	background: #efefef;
	border: 1px solid black;
}

.rapportMission {
	margin: 5px;
	padding: 5px;
	background: #efefef;
	border: 1px solid black;
	clear: both;
}

.blank {
	padding: 1px;
	clear: both;
}

Merci d'avance pour votre aide smile

Morgiver

Dernière modification par Morgiver (Le 15/02/2013, à 12:21)

http://www.morgiver.net/

Hors ligne

#2 Le 14/02/2013, à 16:32

tiramiseb

Re : [RESOLU - Javascript - jQuery] Selection de div indexés

Les id doivent être uniques au sein du même document.

Là tu as plusieurs div avec le même id (en l'occurrence, "1"), donc ton code ne marchera jamais.

Si tu veux faire un lien entre ces différents div de cette manière, je te conseille plutôt :
- soit de faire des id avec préfixe différent et suffixe identique (par exemple "mission1", "dossierMission1", etc)
- soit d'utiliser des classes

Si tu utilises des id avec préfixe :

$('#dossierMission'+id)

Si u utilises des classes :

$('.dossierMission.'+id)

Sébastien Maccagnoni - https://www.maccagnoni.eu - https://www.domotego.com

Hors ligne

#3 Le 14/02/2013, à 16:33

tiramiseb

Re : [RESOLU - Javascript - jQuery] Selection de div indexés

Désolé, j'ai vu un peu tard que tu as résolu ton problème seul : j'avais commencé à le lire sur le flux RSS et n'ai pas relu les premières lignes de ton message sur le site web...

Je reste étonné que ça fonctionne avec plusieurs id identiques, ça risque de déconner avec d'autres navigateurs que celui que tu utilises, il vaut mieux éviter de faire ça, c'est contraire à la norme...
http://www.w3.org/TR/CSS21/selector.html#id-selectors

Dernière modification par tiramiseb (Le 14/02/2013, à 16:34)

Sébastien Maccagnoni - https://www.maccagnoni.eu - https://www.domotego.com

Hors ligne

#4 Le 15/02/2013, à 11:19

Morgiver

Re : [RESOLU - Javascript - jQuery] Selection de div indexés

En effet, niveau norme c'est pas génial. Mais n'étant pas destiné à être publié sur le net et seulement utilisé en interne, je me suis dit que c'était une bonne rustine pas trop foireuse.

Cela dit, étant soucieux de trouver une méthode en accord avec la norme, j'ai fais quelques recherche et je suis tombé sur les index.
Apparemment chaque div est indexé, donc si je fais :

	$('div[class="mission"]').on('mouseover', function() {
		var index = $('div[class="mission"]').index(this);

A ce moment, j'accède à l'index du div de ma mission (j'ai tester en affichant la variable index et ça fonctionne).
Je n'ai plus qu'a travaillé sur les class enfant de la mission, en gros ça donnerait un code dans le genre :

$(function() {
	$('div[class="mission"]').on('mouseover', function() {
		index = $('div[class="mission"]').index(this);
		
		if($('div[class="mission"]')[index].children('.dossierMission').is(':visible'))
		{
			$('div[class="mission"]')[index].children('.hideDetails').on('click', function() {
				$('div[class="mission"]')[index].children('.dossierMission').hide(1000);
				$('div[class="mission"]')[index].children('.showDetails').show();
				$('div[class="mission"]')[index].children('.hideDetails').hide();
			});
		}
		else {
			$('div[class="mission"]')[index].children('.showDetails').on('click', function() {
				$('div[class="mission"]')[index].children('.dossierMission').show('slow');
				$('div[class="mission"]')[index].children('.showDetails').hide();
				$('div[class="mission"]')[index].children('.hideDetails').show();
			});
		}
	});
});

J'ai créer un bouton pour montrer et un pour cacher le dossier de mission, pour que tout soit bien clair.
Cela dit, je crois que j'ai un problème car ce code ne fonctionne pas. J'avoue que je sèche un peu là.

Voilà.

EDIT : J'ai enlevé le résolu, je le remettrais quand j'aurais trouvé une solution en accord avec la norme wink
J'ai également modifié le titre du sujet.

Dernière modification par Morgiver (Le 15/02/2013, à 12:18)

http://www.morgiver.net/

Hors ligne

#5 Le 15/02/2013, à 12:19

Morgiver

Re : [RESOLU - Javascript - jQuery] Selection de div indexés

Voilà ça fonctionne parfaitement :

$(function() {
	$('div[class="mission"]').on('mouseover', function() {
		var index = $(this).index();
		index = index - 1;
		
		if($('div.mission:eq('+index+') [class="dossierMission"]').is(':visible'))
		{
			$('div[class="mission"]:eq('+index+') [class="hideDetails"]').on('click', function() {
				$('div[class="mission"]:eq('+index+') [class="dossierMission"]').hide(1000);
				$('div[class="mission"]:eq('+index+') [class="showDetails"]').show();
				$('div[class="mission"]:eq('+index+') [class="hideDetails"]').hide();
			});
		}
		else {
			$('div[class="mission"]:eq('+index+') [class="showDetails"]').on('click', function() {
				$('div[class="mission"]:eq('+index+') [class="dossierMission"]').show('slow');
				$('div[class="mission"]:eq('+index+') [class="showDetails"]').hide();
				$('div[class="mission"]:eq('+index+') [class="hideDetails"]').show();
			});
		}
	});
});

Il suffisait d'utiliser le selecteur par index "eq(index)" et chercher la bonne classe enfant wink
C'est vraiment sympathique les index, ça permet de sélectionné facilement un élément dans une liste d'élément appartenant à une unique classe. Coté CSS ça demande moins de boulot smile

Dernière modification par Morgiver (Le 15/02/2013, à 12:23)

http://www.morgiver.net/

Hors ligne

Pages : 1