11540 sujets

JavaScript, DOM et API Web HTML5

JQuery : problème avec if et hasClass

Bonjour !

J'ai un souci de condition qui me semble bonne mais qui ne fonctionne pourtant pas. Je n'ai hélas pas encore le niveau pour comprendre pourquoi ça ne marche pas.
J'explique le contexte : sur mon site dans une colonne de navigation, il y a des "widgets" identifiés. Tous appartiennent à la classe "widget". Ils sont réorganisables et leur contenu s'affiche en cliquant sur leur titre h3. Jusque là, tout va bien.
Je veux toutefois pouvoir les fermer, et, afin de les réafficher sur demande de l'utilisateur, je pensais faire une liste sous ces widgets contenant un lien cliquable qui réouvre le widget. Je me disais que le plus simple serait de faire en sorte que "si le widget #untel est affiché alors le lien #untel est caché", et vice-versa.

Concrètement, voilà ce que ça donne :
- pour l'organisation de la page côté html : 


<div class="colonne">
	<div class="widget" id="widget_connexion">
		<h3>Connexion // Inscription</h3><span class="fermeture"><a href="#" >Fermeture</a></span>
        <div class="widget_contenu">
        <!--contenu du widget ici.-->
        </div>
    </div>
<div class="widget_ajout">
        <p>Liste des widgets :</p>
        <ul>
        <li id="raccourci_connexion" class="hidden">Connexion // Inscription</li>            
        </ul>
</div>
</div>


Et côté jQuery, ça donne ceci :


$(".widget")
	.each(function(){
		$(this).hover(function(){
			$(this).find(".fermeture").css("visibility","visible");
		}, function(){
			$(this).find(".fermeture").css("visibility","hidden");
		})
		
		$(".fermeture").click(function(){
		$(this).parents(".widget").addClass("hidden");
		})
		
		.end()
		.find(".fermeture").css("visibility","hidden");
	});


La classe css hidden ne contient qu'un "display:none".

La condition que j'envisageais et qui ne fonctionne pas est :

if ($("#widget_connexion").hasClass("hidden")) $("#raccourci_connexion").removeClass("hidden");

L'étape suivante aurait été de faire en sorte qu'en cliquant sur le #raccourci_connexion, le #widget_connexion perde sa classe "hidden".
Quelqu'un aurait-il l'amabilité de m'indiquer mon erreur ou une autre méthode permettant d'obtenir un résultat équivalent ?
Merci pour votre aide.
salut,

Qu'est ce qui ne fonctionne pas? la classe n'est pas appliquée à ton élement ou le display:none ne marche pas?

Si la classe s'applique mais qu'elle ne fait pas le travail, le problème vient de ta classe "hidden".
J'ai déjà eu un soucis comme ça une fois.
Ne fais pas de display:block/none en appliquant un classe CSS, mais fais-le "inline" avec les méthodes show()/hide().
En regardant le code en direct, je constate bien qu'au clic sur le bouton fermeture, la classe du widget #widget_connexion devient bien class="widget hidden" et disparait comme il faut.
Par contre, la condition n'a aucun effet : le #raccouci_connexion conserve sa classe hidden malgré la réalisation de la condition, et je n'arrive pas à déterminer la source du problème.
Non pas que je sache mais je ne vérifie peut-être pas comme il faut : quand j'affiche la page sur Firefox et que je fais apparaitre la console via FireBug, il n'indique strictement rien.
Après quelques tests avec la console de FireBug je constate que quand j'exécute via la console cette même condition une fois la page chargée, ça fonctionne. Quand le #widget_connexion est ouvert, la console me répond "undefined", et quand il est fermé, cette même condition fait bien réapparaitre le #raccourci_connexion.
Est-ce que cela vous permettrait de comprendre l'origine du problème ?
Bonjour,
Mon problème est résolu en contournant la difficulté.
D'abord je renomme mes id de la liste avec les mêmes noms que les widgets, puis au lieu d'une condition à vérifier, je crée une variable stockant l'id du widget sur lequel est la souris et je remove la classe hidden :


id_widget = $(this).parents(".widget").attr("id"),
$("li#"+id_widget+"").removeClass("hidden")


Alors, c'est peut-être très moche niveau code mais ça fonctionne...Puis je fais l'inverse dans ma liste pour réafficher le widget correspondant.
Sujet clos
Aller à