Ajouter/supprimer classe avec jquery

Commenter

Contenu du snippet

C'est mon premier script donc s'il vous plait, soyez indulgent...
Description:
Un script qui permet de sélectionner ou de désélectionner une balise.

Élément requis :
un parent et une cible possédant au minimum une classe.

Utilisation avec le CSS:
parent:
/*(Class||Id) de la cible*/,/*Suffixe ajouté*/ <... onClick="onOpen("d1v", "selected")"...>
cible:
/*Class de la cible Ex:*/ <... class="d1v" ...>
//Quand parent sera cliqué, l'élément cible ajoutera une classe "d1vselected"
//Quand parent sera recliqué, l'élément cible cible retirera la classe "d1vselected"

Exemple d'utilisation:

<!DOCTYPE html>
<html>
<head>
<style>
.d1v, .d2v, .d3v, .d1vid{
width:100px;
height:100px;
background-color:rgb(102,102,102);
border:none;
color:white;
cursor:pointer;
box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,0.5);
border:1px solid black;
}
.d1v:before, .d2v:before, .d3v:before, .d1vid:before{
content:"Normal";
}
.d1vopen, .d2vopen, .d3vopen, .d1vidopen{
box-shadow:inset 0px 0px 0px 2px rgba(0,0,0,0.5);
}
.d1vopen:before, .d2vopen:before, .d3vopen:before, .d1vidopen:before{
content:"onOpened !";
}
</style>
<script>
function onOpen(cible, suffix){
function validyTest(variable){if (typeof variable != "undefined"){return true;}else{return false;}}
function noPoint(str){return str_replace(".", "", str);}
function noSpace(str){return str_replace(" ", "", str);}
function str_replace(a, b, str){return str_replace2(str, a, b);}
function str_replace2(SRs, SRt, SRu) {
SRRi = SRs.indexOf(SRt);
SRRr = '';
if (SRRi == -1) return SRs;
SRRr += SRs.substring(0,SRRi) + SRu;
if ( SRRi + SRt.length < SRs.length)
SRRr += str_replace2(SRs.substring(SRRi + SRt.length, SRs.length), SRt, SRu);
return SRRr;
}
if(validyTest(suffix)==false){
suffix="open"
}
classClass = cible;
if(cible == str_replace("#", "", cible)){
newclass = noPoint(cible)+suffix;
}else if(cible == noPoint(cible)){
if(validyTest($(cible).attr("class"))==true){
dataClass = $(cible).attr("backclass");
classClass = noSpace(str_replace(dataClass, "", $(cible).attr("class")));
newclass = classClass+suffix;
}else{
$(cible).addClass(str_replace("#", "", $(cible).attr("id")));
dataClass = $(cible).attr("backclass");
classClass = noSpace(str_replace(dataClass, "", $(cible).attr("class")));
newclass = classClass+suffix;
}
}
aclass = $(cible).attr("class");
pclass = str_replace(newclass, "", $(cible).attr("class"));
$("."+noPoint(classClass)).removeClass(newclass);
if(aclass == pclass){
if(cible == noPoint(cible)){
$("."+$(cible).attr("class")).removeAttr("backclass");
}
$(cible).removeAttr("backclass");
$(cible).addClass(newclass);
$(cible).attr("backclass", newclass);
}else{
if($(cible).attr("noclass")=="1"){
$(cible).removeAttr("class");
$(cible).removeAttr("noclass");
}else{
$(cible).removeClass(newclass);
}
$(cible).removeAttr("backclass");
}
}
</script>
</head>
<body>
<button onclick="onOpen('.d1v', 'open')" class="div d1v"><br/>onOpen</button>
<br/>
<button onclick="onOpen('#d1vid', 'open')" id="d1vid" class="d1vid"><br/>onOpen</button>
<br/>
<button onclick="onOpen('.d2v', 'open')" class="d2v"><br/>onOpen2</button>
<button onclick="onOpen('.d2v', 'open')" class="d2v"><br/>onOpen2</button>
<button onclick="onOpen('.d2v', 'open')" class="d2v"><br/>onOpen2</button>
<button onclick="onOpen('.d2v', 'open')" class="d2v"><br/>onOpen2</button>
<button onclick="onOpen('.d2v', 'open')" class="d2v"><br/>onOpen2</button>
<br/>
<button onclick="onOpen('#d31v', 'open')" class="d3v" id="d31v"><br/>onOpen3 .d3v #d31v</button>
<button onclick="onOpen('#d32v', 'open')" class="d3v" id="d32v"><br/>onOpen3 .d3v #d32v</button>
<button onclick="onOpen('#d33v', 'open')" class="d3v" id="d33v"><br/>onOpen3 .d3v #d32v</button>
<button onclick="onOpen('#d34v', 'open')" class="d3v" id="d34v"><br/>onOpen3 .d3v #d34v</button>
<button onclick="onOpen('#d35v', 'open')" class="d3v" id="d35v"><br/>onOpen3 .d3v #d35v</button>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</body>
</html>

Source / Exemple : 


function onOpen(cible, suffix){
	function validyTest(variable){if (typeof variable != "undefined"){return true;}else{return false;}}
	function noPoint(str){return str_replace(".", "", str);}
	function noSpace(str){return str_replace(" ", "", str);}
	function str_replace(a, b, str){return str_replace2(str, a, b);}
	function str_replace2(SRs, SRt, SRu) {
	  SRRi = SRs.indexOf(SRt);
	  SRRr = '';
	  if (SRRi == -1) return SRs;
	  SRRr += SRs.substring(0,SRRi) + SRu;
	  if ( SRRi + SRt.length < SRs.length)
	    SRRr += str_replace2(SRs.substring(SRRi + SRt.length, SRs.length), SRt, SRu);
	  return SRRr;
	}
	if(validyTest(suffix)==false){
		suffix="open"
	}
	classClass = cible;
	if(cible == str_replace("#", "", cible)){
		newclass = noPoint(cible)+suffix;
	}else if(cible == noPoint(cible)){
		if(validyTest($(cible).attr("class"))==true){
			dataClass = $(cible).attr("backclass");
			classClass = noSpace(str_replace(dataClass, "", $(cible).attr("class")));
			newclass = classClass+suffix;
		}else{
			$(cible).addClass(str_replace("#", "", $(cible).attr("id")));
			dataClass = $(cible).attr("backclass");
			classClass = noSpace(str_replace(dataClass, "", $(cible).attr("class")));
			newclass = classClass+suffix;
		}
	}
	aclass = $(cible).attr("class");
	pclass = str_replace(newclass, "", $(cible).attr("class"));
	$("."+noPoint(classClass)).removeClass(newclass);
	if(aclass == pclass){
		if(cible == noPoint(cible)){
			$("."+$(cible).attr("class")).removeAttr("backclass");
		}
		$(cible).removeAttr("backclass");
		$(cible).addClass(newclass);
		$(cible).attr("backclass", newclass);
	}else{
		if($(cible).attr("noclass")=="1"){
			$(cible).removeAttr("class");
			$(cible).removeAttr("noclass");
		}else{
			$(cible).removeClass(newclass);
		}
		$(cible).removeAttr("backclass");
	}
}

/*
jQuery gère déjà la totalité de ce script. Par conséquent, il n'est plus utile...
Pour plus d'info voir :
- toggleClass();
http://api.jquery.com/toggleClass/
- addClass();
http://api.jquery.com/addClass/
- removeClass();
http://api.jquery.com/removeClass/


  • /

Conclusion :


Un script qui ajoute et supprime des classes.

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (p4YGpl6O)