Discussion :

[joprog]

Bonjour,

Je n'ai malheureusement rien trouvé à mon goût sur les forums (j'ai sûrement mal cherché...) mais en même temps, je ne sais de quel côté me lancer dans mes recherches. Je ne connais pas assez bien ce domaine puisque je m'y suis mis depuis trois jours. Je vous demanderais donc d'être tolérant avec moi, svp !

Voilà mon problème, je vous donne directement mon code HTML qui sera sans doute plus facile a comprendre qu'un long discours :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<form id="RegisterForm">
                <p>Nom d'utilisateur :<input type="text" size="15" class="TextField" name="RegUsername" id="Regusername" /></p> <hr/>
                <p>Mot de passe :<input type="password" size="15" class="TextField" name="RegPassword" id="Regpassword" /></p> <hr/>
                <p id="verification">Vérification :<input type="password" size="15" class="TextField" name="RegPasswordV" id="Regpassword" /></p> <br />
                <input id="ValidateBt" type="button" accesskey="2" name="register" value="Register" />
                </form>

Et mon code JQuery :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
$("input[name='RegUsername']").live ("keyup", function ()
	{
		var $Parent = $(this).parent();
		if (!$(this).val().length)
		{
			if ($Parent.html().indexOf ("img") != -1)
		//	{	$($Parent+ " img").attr("src", "./images/RedLight.png");	}
			{	$($Parent+ " img").src = "./images/RedLight.png";	}
			else
			{	$Parent.append ("<img src=\"./images/YellowLight.png\" width=20px height=20px />");	}
		}
		else
		{
			if ($(this).val().length < 8)	//	Usename can't be little than 8 char.
			{
				if ($Parent.html().indexOf("img") == -1)
				{	$Parent.append (Picture);	} //"<img src=\"./images/YellowLight.png\" width=20px height=20px/>"
				else
				{	$($Parent+" last-child").attr ("img", "./images/YellowLight.png");	}//$(Parent+" > img").attr ("src", "./images/YellowLight.png"));	}
			}
			else	//	More than or equals to 8 char
			{	$($Parent+" img").attr ("src", "./images/GreenLight.png");	}
		}*/
	});

Tout d'abord, la ligne qui me pose le plus de problème est celle-ci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$($Parent+ " img")

En effet, ce que j'essaye de faire c'est de sélectionner le fils "<img .../>" créé précédemment (et dynamiquement avec JQuery) et d'en modifier l'attribut "src" afin de changer d'image.

Quelqu'un pourrait-il m'aider ?

Merci pour vos réponses !

[Bovino]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var $Parent = $(this).parent();

te renvoie un élément jQuery, tu ne peux donc pas l'utiliser pour cibler un autre élément via $() qui attend une chaine en paramètre.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var $Parent = $(this).parent().children('img').eq(0);

voire si c'est possible :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var $Parent = $(this).prev('img');

[joprog]

Merci infiniement Bovino,

Ton code m'a beaucoup apporté !!!

Voilà le résultat final fonctionnel que j'utilise :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
$("input[name='RegUsername']").live ("keyup", function ()
	{
		var $Parent = $(this).parent();
		if (!$(this).val().length)
		{
			if ($Parent.html().indexOf ("img") != -1)
			{	$Parent.children('img').attr ("src", "./images/RedLight.png");	}
			else
			{	$Parent.append ("<img src=\"./images/RedLight.png\" width=20px height=20px />");	}
		}
		else
		{
			if ($(this).val().length < 8)	//	Usename can't be little than 8 char.
			{
				if ($Parent.html().indexOf("img") == -1)
				{	$Parent.append ("<img src=\"./images/YellowLight.png\" width=20px height=20px/>");	}
				else
				{	$Parent.children ("img").attr ("src", "./images/YellowLight.png");	}
			}
			else	//	More than or equals to 8 char
			{	$Parent.children ("img").attr ("src", "./images/GreenLight.png");	}
		}
	});