11548 sujets

JavaScript, DOM et API Web HTML5

La selection de sous container

Bonjour,
mon problème est que quand on sélectionne des enfants (sous container) de parents( container) différents les enfants restent sélectionner .
voici le code xhtml:


 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title></title>
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
 
<meta http-equiv="Content-Language" content="fr" />
 
 
<style type="text/css">
<!--
.container{
	width: 200px;
	heigth: 200px;
	border: 1px solid #A3D413;
	margin-bottom:10px;
}
.container1{
	width: 200px;
	heigth: 200px;
	border: 1px solid #000000;
	margin-bottom:10px;
}
.container2{
	width: 200px;
	heigth: 200px;
	border: 1px solid #000000;
	margin-bottom:10px;
}
.container3{
	width: 200px;
	heigth: 200px;
	border: 1px solid #000000;
}
 
.sous_container1, .sous_container2, .sous_container3{
	margin: 20px;
	border: 1px solid #FF0000;
	margin-bottom:10px;
}
.sous_container{
	margin: 20px;
	border: 1px solid #FF0000;
	margin-bottom:10px;
}
.sous_container_on{
	margin: 20px;
	border: 1px solid #A3D413;
	margin-bottom:10px;
}
-->
</style> 
 
<script type="text/javascript">
<!-- 
var clicDivEnfant = false;
function clic_1(objet)
{
	if (!clicDivEnfant)
	{
		selectElement(objet);
	}
	clicDivEnfant = false;
}
 
function clic_2(objet)
{
	clicDivEnfant = true;
	selectElement_page(objet);
}
 
 
var current = null;

function selectElement_page(element){
				
				current = element ;
				var parent = element.parentNode;
				for(i=0;i<parent.childNodes.length;i++){
					  
					var newclass = 'tests'+i;
				
				parent.childNodes[i].className= 'sous_container';
				
			}
				element.className = 'sous_container_on';
				
			}
			
			
			function selectElement(element){
        current = element ;
				var parent = element.parentNode;
				var j =1;
				for(i=0;i<parent.childNodes.length;i++){
					  
			
				
				parent.childNodes[i].className= 'container1';
				
			}
			element.className = 'container';
			
			}
 
//-->
</script>
 
</head>
 
 
<body>
 
<div class="container1" onclick="clic_1(this)">
 
	<div class="sous_container" onclick="clic_2(this)">sous bloc 1</div>
	<div class="sous_container" onclick="clic_2(this)">sous bloc 2</div>
	<div class="sous_container" onclick="clic_2(this)">sous bloc 3</div>
  
</div>
<div class="container1" onclick="clic_1(this)">
 
	<div class="sous_container" onclick="clic_2(this)">sous bloc 1</div>
	<div class="sous_container" onclick="clic_2(this)">sous bloc 2</div>
	<div class="sous_container" onclick="clic_2(this)">sous bloc 3</div>
  
</div>
 
 <div class="container1" onclick="clic_1(this)">
 
	<div class="sous_container" onclick="clic_2(this)">sous bloc 1</div>
	<div class="sous_container" onclick="clic_2(this)">sous bloc 2</div>
	<div class="sous_container" onclick="clic_2(this)">sous bloc 3</div>
  
</div>
 
 
 
</body>
</html>
[/i][/i]
Salut,

En reprenant seulement tes deux fonctions de dé/selection comme ça, ça doit marcher :
function selectElement_page(element){
    var parent = element.parentNode;
    selectElement(parent);
    for (var i=0; i<parent.childNodes.length; i++) {
        parent.childNodes[i[#000]].className = 'sous_container';
    }
    element.className = 'sous_container_on';
}

function selectElement(element){
    var parent = element.parentNode;
    for (var i=0; i<parent.childNodes.length; i++){
        var container = parent.childNodes[i[#000]];
        container.className = 'container1';
        for (var j=0; j<container.childNodes.length; j++) {
            container.childNodes[j].className = 'sous_container';
        }
    }
    element.className = 'container';
}
C'est largement optimisable, mais le principe est là.
Sujet clos
Aller à