11548 sujets

JavaScript, DOM et API Web HTML5

[résolu] Sélecteurs css / Jquery

Bonjour,

je me met à Jquery, et par la même occasion à tous ce qui ce rapporte.

selon mon code html suivant :

<ul class ='dispo'>
    <li id='s14_lu_m' class='lu unk' />
    <li id='s14_lu_a' class='lu nok' />
    <li id='s14_lu_s' class='lu ok' />
</ul>



<ul class ='dispo'>
    <li id='s14_ma_m' class='ma unk' />
    <li id='s14_ma_a' class='ma unk' />
    <li id='s14_ma_s' class='ma unk' />
</ul>

Je cherche à faire en sorte qu'au moment ou je clique sur l'un des <li>, les autres <li> du même <ul> changent de couleur.

Sans succès pour le moment ...

	$("li").click( function(event) {

			if ( $(this).attr("class").indexOf("unk") != -1)
			{
				$(this).addClass("ok");
				$("li").removeClass("unk");
				$("li").addClass("nok");
				$(this).removeClass("nok");
				end;
			}
			

			if ( $(this).attr("class").indexOf("nok") != -1)
			{
				 $(this).removeClass("nok");
				 $(this).addClass("ok");
				 end;
			}
			

			if ( $(this).attr("class").indexOf("ok") != -1)
			{
				 $(this).removeClass("ok");
				 $(this).addClass("nok");
			}
	});

});


à défaut : j'ai mis => $("li").removeClass("unk");
Modifié par Clairdelune (31 May 2007 - 16:54)
Salut, tu t'embêtes pour rien.

Tu dois passer par $("ul.dispo li"); pour appliquer le class à tous les li 

$("ul.dispo li").click( function(event) {

(this.attr("class") == "ok" ) ? this.attr("class") = "unk" : this.attr("class") = "ok";

});


En principe ça doit marcher, j'ai jamais utilisé Jquery donc bon Smiley rolleyes
Modifié par Shinuza (28 May 2007 - 21:02)
Bonjour,

justement, je ne souhaite pas l'appliquer à tous les Li, mais seulement à ces frères, c'est à dire aux 2 autres Li qui sont à cotés (appartenant au même lu).

A moins que je me trompe, mais $("ul.dispo li") ne sait pas faire cette diffèrence.
J'ai finit par trouver Smiley smile , il suffisait d'un peu de javascript.
Il est sûrement possible de faire plus simple...

if ( $(this).attr("class").indexOf("unk") != -1)
			{
				$(this).addClass("ok");
				$jour = "li."+$(this).attr("class").substring(0,2);
				$($jour).removeClass("unk");
				$($jour).addClass("nok");

				$(this).removeClass("nok");
				end;
			}
Clairdelune a écrit :
Bonjour,

justement, je ne souhaite pas l'appliquer à tous les Li, mais seulement à ces frères, c'est à dire aux 2 autres Li qui sont à cotés (appartenant au même lu).

A moins que je me trompe, mais $("ul.dispo li") ne sait pas faire cette diffèrence.


Si, this fais référence à l'élement cliqué, et le parent de celui ci c'est le ul en question donc l'application se fera sur tout les li fils du ul parent.
Je veux bien... mais ...

si je fais :

	$("ul.dispo li").click( function(event) {

			if ( $(this).attr("class").indexOf("unk") != -1)
			{
				$(this).addClass("ok");
				$("ul.dispo li").removeClass("unk");
				$("ul.dispo li").addClass("nok");
				$(this).removeClass("nok");
				end;
			}


Il sélectionne l'ensemble des li...
pourquoi t'enleve un class pour en remettre une entre ?
tu peux faire 

$(id).className='ta nouvelle class';

et comme ca ca ecrase diretement ^^
ton this c'est un element et non un Id si c'est prototype que tu utilise je ne croi pas que $(element) marche je croi que c'est plutot $(id) à confirmer...
ya une methode qui est dans prototye je croi qui s'apelle element.getElementsByClassName('class') qui recupere tout les element qui ont la class class dans ton cas je croi que 

$("ul.dispo li").getElementsByClassName('la class des deux frére')
te sera grandement utile ^^
Bonjour,

Moi j'utilise ceci : vous faite appel à cette fonction pour changer la class de l'element "el".
Ex: select_item(3);

function select_item(el)
	{
		var int = 0;
		var total = 10;
		for(i = int; i <= total; i++)
		{
			var item_id = $('item_' + i);
			if(el == i)
			{
				item_id.addClass("row-select");
			} else {
				item_id.removeClass("row-select");
				item_id.addClass("row");
			}
		}
	}

Modifié par badoux (01 Jun 2007 - 11:09)
Sujet clos
Aller à