Ajouter/supprimer classe avec jquery

Soyez le premier à donner votre avis sur cette source.

Snippet vu 4 454 fois - Téléchargée 14 fois

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

Ajouter un commentaire

Commentaires

cs_emilia123
Messages postés
122
Date d'inscription
mercredi 19 décembre 2001
Statut
Membre
Dernière intervention
5 janvier 2009
-
Bonjour,

Il me semble qu'il y a la fonction JQuery "toggleClass" qui permet de réaliser une partie de ce que tu fais.
Cela pourrait simplifier une partie du code :)

Bonne continuation.

EM.
Merci beaucoup ! :D
Yvanoph
Messages postés
15
Date d'inscription
vendredi 19 novembre 2010
Statut
Membre
Dernière intervention
5 juin 2013
-
Bonjour / Bonsoir, sans vouloir vous "casser" le moral, il existe depuis la V 1.1 chez jQuery la "function" adClass() qui en une ligne exécute exactement la même chose ? Et la removeClass qui supprime du DOM l'ajout, soit revenir en arrière si une classe a été ajoutée par la précédente, sinon donc supprimer une existante.
Quant à le "function" toggleClass() mentionnée, elle sert à cumuler les deux précédentes en une seule pour l'ajout et suppression.
Bien amicalement, Yvanoph---
cs_Gatsu35
Messages postés
7
Date d'inscription
mardi 6 mai 2003
Statut
Membre
Dernière intervention
16 septembre 2008
-
Meme sans jquery la fonction addClass ou removeClass peut être écrite en 3 lignes
function addClass(elm, classname) {
if(!getClassRegExp(classname).test(elm.className))
   elm.className+= ' ' + classname;
}

function removeClass(elm, classname) {
  elm.className = elm.className.replace(getClassnameRegExp(classname), '');
}

function getClassRegExp(classname) {
   return new RegExp('(^|\\s)' + classname + '(\\s|$)','g');
}

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.