[Résolu] [JS] Boucle changement de background au clic

Bonjour,

J'ai un bouton avec un background image. Lorsqu'on clic sur ce dernier, un bloc texte apparait à côté. Et lorsqu'on re-clic dessus, le bloc texte se referme.

J'aimerais simplement changer le background du bouton lorsqu'on clic dessus.

$("#descriptionProjet").hide();
$("#btnDescription").click(function() {
     $("#descriptionProjet").fadeToggle("medium", "linear");
});

Merci !

Tu peux faire ça assez simplement si tu utilises JQuery avec .css() : Doc de l'API

$("#btnDescription").css('background','ta propriété css'); .A toi de l'associer ensuite à un évènement.

Peux-tu copier ton code html ici que je te donne un exemple fonctionnel ?
Modifié par Klesk (22 Oct 2012 - 09:44)

Ça marche nickel merci !

Mais je n'arrive pas à faire une boucle. Si tu re-clic dessus le background ne revient pas comme il était au début.

/* DESCRIPTION */
$("#descriptionProjet").hide();
$("#btnDescription").click(function() {
     $("#btnDescription").css('background','url(img/fermerProjet.png)');
     $("#descriptionProjet").fadeToggle("medium", "linear");
});

Pour faire ta boucle tu peux finter un peu . Peux-tu me donner ton code html avec le bouton ?

Voilà

        <div id="btnDescription"></div>


        <div id="descriptionProjet">

            <div id="contentDescriptionProjet">
            
                <h2>Date</h2>
                <p>August 2012</p>

                <h2>Client</h2>
                <p>Personal project</p>

                <h2>Description</h2>
                <p>Ad facilisi, velit enim feugiat, vel eum vero dignissim. Consequatvel adipiscing dolore crisare.</p>
                
                <p id="previousProject"><a href="">Previous project</a></p>
                <p id="nextProject"><a href="pianoVino.php">Next project</a></p>
                <br class="clear" /><!-- clear -->

            </div>

        </div>

#btnDescription{
    position: absolute;
    top: 0;
    left: 0;
    width: 75px;
    height: 75px;
    background: url('../img/btnDescription.png');
    background-position: center center;
    background-repeat: no-repeat;
    -ms-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    z-index: 3001;
}

#btnDescription:hover{
    background: url('../img/btnDescription.png') #000;
}

EDIT : voilà, je m'étais trompé de CSS
Modifié par nerval (22 Oct 2012 - 11:37)

Je ne vois pas le bouton dans le html c'est normal ?

Alors pour commencer sur ton bouton en plus de son id="btnDescription" tu vas rajouter class="statut1". Tu peux nommer les statuts du bouton comme tu l'entends avec quelque chose qui soit parlant en rapport avec ce a quoi ils correspondent.

Essai ça :

var classBouton = $("#btnDescription").attr("class");

$("#btnDescription").click(function() {
	if (classBouton == 'statut1'){
		$(this).css('background','ton background pour le statut 2').addClass('statut2').removeClass('statut1');
		$tes actions eventuelles;
	} else {
		$(this).css('background','ton background pour le statut 1').addClass('statut1').removeClass('statut2');
		$tes actions eventuelles;
	}
});

On défini une variable qui va nous retourner la valeur de la class du bouton au moment du click.

Puis on fait une condition. Si le bouton a la class statut 1 quand on clique dessus, alors on applique le background 2, on applique la class statut 2 et on supprime la class initiale.

Lorsqu'on va recliquer sur le bouton, ce dernier aura cette fois le statut 2 et remplira la condition else qui lui appliquera le background 1, le statut 1 pour retourner au statut initial puis supprimera la class statut 2.

:)
Modifié par Klesk (22 Oct 2012 - 12:00)

Merci ça m'a l'air très bien mais ça ne marche pas
Je l'ai mis en ligne sur cette page ça sera plus simple pour regarder.

Merci de ton aide !

Refait un copier/coller je m'étais planté j'ai corrigé mon code entre temps . Et supprime le $tes actions eventuelles; qui est là pour indiquer juste que tu peux mettre d'autres actions sur ton click. Si tu le laisses ça va planter le script.
Modifié par Klesk (22 Oct 2012 - 13:36)

La boucle ne marche pas
J'ai remis online.

Autant pour moi essai ça :

$("#btnDescription").click(function() {
	var classBouton = $("#btnDescription").attr("class");
	
	if (classBouton == 'statut1'){
		$(this).css('background','url(img/fermerProjet.png)').addClass('statut2').removeClass('statut1');
		$("#descriptionProjet").fadeToggle("medium", "linear");
		/* actions eventuelles */
	} else {
		$(this).css('background','url(img/btnDescription.png)').addClass('statut1').removeClass('statut2');
		$("#descriptionProjet").fadeToggle("medium", "linear");
		/* actions eventuelles */
	}
});

EDIT : En fait j'avais fais une connerie en laissant la variable en dehors de la fonction .click du coup elle n'était définie qu'une seule fois, alors que là elle est redéfinie a chaque click et du coup la valeur change et peux appeler le else if.
Modifié par Klesk (22 Oct 2012 - 13:49)

Toujours pas
Je vois vraiment pas d’où ça peut venir.

C'est normal j'ai corrigé une boulette entre temps . Désolé pour mes boulettes je fais ça en speed, je suis au taf là . Refait un copier/coller de ça :

$("#btnDescription").click(function() {
	var classBouton = $("#btnDescription").attr("class");
	
	if (classBouton == 'statut1'){
		$(this).css('background','url(img/fermerProjet.png)').addClass('statut2').removeClass('statut1');
		$("#descriptionProjet").fadeToggle("medium", "linear");
		/* actions eventuelles */
	} else {
		$(this).css('background','url(img/btnDescription.png)').addClass('statut1').removeClass('statut2');
		$("#descriptionProjet").fadeToggle("medium", "linear");
		/* actions eventuelles */
	}
});

Modifié par Klesk (22 Oct 2012 - 13:58)

Génial merci !

En fait le fait de définir la variable avant la fonction etait une boulette car elle était définie une seule fois au chargement de ta page avec donc le statut 1. La première condition pouvait donc etre remplie car statut 1 est le premier cas, mais la seconde condition ne pouvait pas l'être vu que la variable restait a statut1 ad vitam.

Le fait de redéfinir la variable a chaque click permet de la faire changer 1 fois sur 2 en fonction de la class qu'on a sur le bouton .
Modifié par Klesk (22 Oct 2012 - 14:01)