Aller au contenu

className onclick

ZuckBin

Par ZuckBin
dans AjaX et JavaScript

 Partager

Sujets conseillés

ZuckBin

ZuckBin

Posté
Posté

Bonjour,

Je suis un total débutant en JS.

je veux juste ajouter une classe à une class existante sur un <a> voici mon code:

<script type="text/javascript">
window.addEvent('domready', function() {

	function addClass(element,value) {
		if(!element.className){
		element.className = value;
		}else{
		newClassName = element.className;
		newClassName+= " ";
		newClassName+= value;
		element.className = newClassName; 
		}
	}
});

</script>

<a href="#" class="pictofleche" onclick="addClass(test);"></a>

J'ai une erreur:

test is not defined

ce que je souhaite:

<a href="#" class="pictofleche test" onclick="addClass(test);"></a>

Merci de votre aide,

Cordialement.

Lien vers le commentaire
Partager sur d’autres sites
cyberlaura

cyberlaura

Posté
Posté

Bonjour ZuckBin,

comme ça vite fait vu l'heure, tu fais un addclass(test) alors que tu n'as pas défini d'id pour ton lien. Ca fonctionnerai donc mieux si tu faisais :

<a href="#" id="test" class="pictofleche" onclick="addClass(test);"></a>

Lien vers le commentaire
Partager sur d’autres sites
SStephane

SStephane

Posté
Posté (modifié)

Je dirais plutot :

<a href="# class="pictofleche" onclick="addClass(this,'test');"></a>

pas besoin de définir d'id à priori, d'un autre coté complète un peu ta fonction, elle a l'air inachevée ;)

c'ets pour pas te retrouver avec un truc du genre 

<a href="#" class="pictofleche test test test test test test test test test test test test" onclick="addClass(this,test);"></a>

Modifié par SStephane
Lien vers le commentaire
Partager sur d’autres sites
ZuckBin

ZuckBin

Posté
  • Auteur
Posté

Je me retrouve avec ceci:

<a class="pictofleche http://nomdomain.com/#" onclick="addClass(this,'TEST');" href="#"/>

Pour faire simple je veux juste un changement de class sur le onclick

on a ceci: pictofleche, on click on a ceci: pictofleche TEST, je reclick, j'ai : pictofleche

Merci ;)

Lien vers le commentaire
Partager sur d’autres sites
SStephane

SStephane

Posté
Posté (modifié)

Essai donc ceci :

	function addClass(_element,_value)
	{
		try
		{
			var oReg = new RegExp("(^|s)"+_value+"(s|$)");

			if(!_element.className)
			{
				_element.className = _value;
			}
			else
			{
				var bTest = oReg.test(_element.className);
				if(bTest)
				{
					_element.className = _element.className.replace(oReg,'');
				}
				else
				{
					var newClassName = element.className;
					newClassName+= " ";
					newClassName+= _value;
					element.className = newClassName;
				}
			}
		}
		catch(e)
		{

		}
	}

J'ai pas testé mais ça doit être pas loin de ce que tu veux.

Stéphane.

Modifié par SStephane
Lien vers le commentaire
Partager sur d’autres sites
ZuckBin

ZuckBin

Posté
  • Auteur
Posté

J'ai essayer ton code Stéphane, ça ne change rien

J'ai donc mis ceci:

<a href="#" class="pictofleche" onclick="addClass(this,'active');"></a>

et j'ai copier coller ton code tel quel.

Ca fais exactement comme avant.

j'ai meme essayer de remplacer "_value" partout dans le code par ma classe "active", même résultat.

Lien vers le commentaire
Partager sur d’autres sites
SStephane

SStephane

Posté
Posté (modifié)

Mauvais c/c du code existant ;)

	function addClass(_element,_value)
	{
		try
		{
			var oReg = new RegExp("(^|s)"+_value+"(s|$)");

			if(!_element.className)
			{
				_element.className = _value;
			}
			else
			{
				var bTest = oReg.test(_element.className);
				if(bTest)
				{
					_element.className = _element.className.replace(oReg,'');
				}
				else
				{

					var newClassName = _element.className;
					newClassName+= " ";
					newClassName+= _value;
					_element.className = newClassName;
				}
			}
		}
		catch(e)
		{

		}
	}

Modifié par SStephane
Lien vers le commentaire
Partager sur d’autres sites
SStephane

SStephane

Posté
Posté (modifié) 

var oReg = new RegExp(_value+"$");

La regex fonctionnait pas, pourtant elle semblait pas trop mal, colle ça à la place et ça marchera (j'ai testé ce coup ci), creuse de ce coté si tu cherches un truc moins perfectible...

Modifié par SStephane
Lien vers le commentaire
Partager sur d’autres sites
SStephane

SStephane

Posté
Posté

Crée une page HTML et colle ceci, tu pourras constater que ça fonctionne, maintenant, je crois qu'il va falloir que tu creuses un peu par toi même aussi :D

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title></title>
<script type="text/javascript">
	function addClass(_element,_value)
	{
		try
		{
			var oReg = new RegExp("^([\s]*)"+_value+"$");

			if(!_element.className)
			{
				_element.className = _value;
			}
			else
			{
				var bTest = oReg.test(_element.className);

				if(bTest)
				{

					_element.className = _element.className.replace(_value,"");
				}
				else
				{				
					var newClassName;
					newClassName = _element.className;
					newClassName+= " ";
					newClassName+= _value;
					_element.className = newClassName;
				}
			}
		}
		catch(e)
		{

		}
	}
</script>
<style type="text/css">
.blue
{
	color:blue!important;
}
.green
{
	color:green;
}
</style>
</head>
<body>
<a href="#" class="green" onclick="addClass(this,'blue');">Lien</a>
</body>
</html>

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...