jQuery : Appliquer une classe à un élément cliqué

John Smith · 7 Mai 2011

Bonjour à tous,

Après une longue recherche infructueuse, je me tourne encore vers vous pour résoudre un petit désagrément qui commence à me courir.

Voici un bout de code :

Code:

<ul class="menu-vertical">
            <li onclick="MenuChoix('informations');">Enregistrement</li>
            <li  onclick="MenuChoix('profil');">Profil</li>
            ...
        </ul>

Et voici pour la fonction :

Code:

function MenuChoix(id)
	{
		$(".menu-vertical > li").removeClass("current"); // On supprime toutes les classes current des li
		$(this).addClass("current");  // On applique la classe current à la li cliqué <--- Ca ne marche pas !!!
                                ...
	}

Le id concerne une div situé dans la page qui doit apparaitre ou disparaitre mais le problème n'est pas là. En fait, je voudrais appliquer une classe à mon élément cliqué mais j'ai l'impression que $(this) ne prend pas mon élément li.

Pourriez-vous m'aider ? Merci.

MarvinLeRouge · 7 Mai 2011

Salut,

Je pense que tu t'y prends mal, ça donnerait plutôt un truc du style

Code:

<ul class="menu-vertical">
  <li class="toggler" id='informations-toggler">Enregistrement</li>
  <li class="toggler" id="profil-toggler">Profil</li>
...
</ul>

Code:

$(function()
{
  $(".toggler").click(function(e)
  {
    e.preventDefault();
    var reg=new RegExp("-toggler", "g");

    var cible = $(".current").attr("id");
    cible = cible.replace(reg, "");
    $("#" + cible).hide().removeClass("current");

    cible = $(this).attr("id");
    cible = cible.replace(reg, "");
    $("#" + cible).show().addClass("current");
  });
});

John Smith · 7 Mai 2011

Bonsoir,

Merci pour cette réponse mais ça n'a pas l'air de marcher. Je vais essayer de creuser un peu... Avant d'aller me coucher !

spout · 8 Mai 2011

C'est plus simple que ça :wink:

http://jsbin.com/uvumo6/edit

PHP:

<span class="syntaxhtml"><span class="syntaxdefault"><br /></span><span class="syntaxkeyword"><!</span><span class="syntaxdefault">DOCTYPE html</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">html</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">head</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">script class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"jsbin"</span><span class="syntaxdefault"> src</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"</span><span class="syntaxkeyword">></span><span class="syntaxdefault"></script><br /></span><meta charset=utf-8 /><br /><title>JS Bin</title><br />  <script type="text/javascript"><br />  $(document).ready(function(){<br />    $('.menu-vertical > li').click(function() {<br />      $(this).toggleClass('current');<br />    });<br />  });<br /></script><br /><style><br />  .current {color:#FF0000;}  <br /></style><br /></head><br /><body><br /><ul class="menu-vertical"><br />  <li>Enregistrement</li><br />  <li>Profil</li><br /></ul><br /></body><br /></html><br /></span>

John Smith · 8 Mai 2011

Merci beaucoup, le résultat est un mix de tout ça :

Code:

		$('.menu-vertical > li').click(function() {
			var reg=new RegExp("-toggler", "g");
			
			id = $(this).attr("id");
			id = id.replace(reg, ""); /* Ca va me servir à récupérer l'id de la div que je veux faire apparaitre plus loin dans ma page */
			
			$('.menu-vertical > li').removeClass("current"); /* On efface les current */
			$(this).toggleClass('current'); /* La li cliquée devient current */

/* Ici je me sers de l'id que j'ai reconstituée pour faire apparaitre la div */
		});

Merci à tous !