Animation pour un seul élément

Par Florian.C, il y a 9 ans

Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.

J'essaye de faire en sorte que lorsque je clique sur un li, le contenu apparaissent. Ca, ça va, par ailleurs, en même temps mon bouton change d'état passant d'un + à x. Ca fonctionne aussi mais à tout les li.

J'aimerai que cela le fasse pour le li selectionner. J'ai lu la doc concernant select selected mais pas de bon résultat.

Merci pour votre aide !

J'utilise Wordpress et jQuery et oui il est bien chargé.

jquery

$('.tab').click(function(e) { e.preventDefault(); var id = $(this).attr('id'); var current_show = $('#' + id + 'show').hasClass('show-content'); $('.contenu .show-content').removeClass('show-content'); $('li').removeClass('blanc'); //la croix et le plus en question $('.plus').attr('src', 'http://localhost/nouveaubrainsagency/wp-content/themes/agencybrains/library/images/normalOrange.png'); if( !current_show ){ $('#' + id + 'show').addClass('show-content'); $('#' + id + ' li').addClass('blanc'); //la croix et le plus en question $('.plus').attr('src', 'http://localhost/nouveaubrainsagency/wp-content/themes/agencybrains/library/images/plusBlanc.png'); } });

html

<div class="nav"> <a id="tab20" class="tab"> <li class="orange trois-cas"> <p><?php echo get_post_meta(get_the_ID(), 'propos_nous_titre_1', 1); ?></p> <img src="<?php echo get_stylesheet_directory_uri(); ?>/library/images/normalOrange.png" class="plus"> </li> </a> <a id="tab21" class="tab"> <li class="orange"> <p><?php echo get_post_meta(get_the_ID(), 'propos_nous_titre_2', 1); ?></p> <img src="<?php echo get_stylesheet_directory_uri(); ?>/library/images/normalOrange.png" class="plus"> </li> </a> <a id="tab22" class="tab"> <li class="orange"> <p><?php echo get_post_meta(get_the_ID(), 'propos_nous_titre_3', 1); ?></p> <img src="<?php echo get_stylesheet_directory_uri(); ?>/library/images/normalOrange.png" class="plus"> </li> </a> </div> <div class="contenu"> <div id="tab20show" class="tab-content"> <h3><?php echo get_post_meta(get_the_ID(), 'propos_nous_titre_1', 1); ?></h3> <p><?php echo get_post_meta(get_the_ID(), 'propos_nous_texte_1', 1); ?></p> <div><?php echo wp_get_attachment_image(get_post_meta(get_the_ID(), 'propos_nous_img_1_id', 1), 'full'); ?></div> </div> <div id="tab21show" class="tab-content"> <h3><?php echo get_post_meta(get_the_ID(), 'propos_nous_titre_2', 1); ?></h3> <p><?php echo get_post_meta(get_the_ID(), 'propos_nous_texte_2', 1); ?></p> <div><?php echo wp_get_attachment_image(get_post_meta(get_the_ID(), 'propos_nous_img_2_id', 1), 'full'); ?></div> </div> <div id="tab22show" class="tab-content"> <h3><?php echo get_post_meta(get_the_ID(), 'propos_nous_titre_3', 1); ?></h3> <p><?php echo get_post_meta(get_the_ID(), 'propos_nous_texte_3', 1); ?></p> <div><?php echo wp_get_attachment_image(get_post_meta(get_the_ID(), 'propos_nous_img_3_id', 1), 'full'); ?></div> </div> </div>

5 réponses

Canonier, il y a 9 ans

Salut :)

J'ai pas vraiment regardé ton code, mais c'est typiquement un soucis avec l'utilisation du $this en js ;)
Il faut bien que tu gardes en tete que le $this fera reference à l'élement cliqué. Ici ce doit donc etre ton li et pas autre chose :)

Ou alors si vraiment tu dois chercher un élément parent, sois certain ensuite d'aller chercher le bon enfant :
$this.find('li'); par exemple ;)

Lartak, il y a 9 ans

Bonsoir.
Il y a quelque chose que je ne comprends pas.
Pourquoi est-ce que tu utilise la balise li dans un lien ?
Surtout qu'en général c'est plutôt l'inverse, soit : <li><a href="...">...</a></li> et non <a href="..."><li>...</li></a>.
Pour information, au cas où tu ne le saches pas, une balise li doit se situer soit dans une balise ul ou alors dans une balise ol.
Au cas où tu ne le saches pas, dans ton javascript, quand tu fais $('.plus') tu sélectionnes tous les éléments du DOM qui ont la classe plus et pas seulement un et encore moins de précis.
Si tu ne veux sélectionner que l'élément qui a la classe plus dans l'élément sélectionné, tu peux par exemple faire :

var $image = $(this).find('.plus'); $image.attr('src', 'http://localhost/nouveaubrainsagency/wp-content/themes/agencybrains/library/images/normalOrange.png');
saibe, il y a 9 ans

hello, @canonier a raison, juste que ton soucis est sur le '.plus'
tu fais un

$('.plus')

qui va sélectionner toutes tes img.plus alors qu'il faut faire

$(this).find('.plus')

pour ne sélectionner que ton img.plus enfant.

cela dit ton code peut être revu légérement à mon avis:

$('.tab').click(function(e) { e.preventDefault(); var id = $(this).attr('id'); var current_show = $('#' + id + 'show').hasClass('show-content'); // tu peux placer ta condition ici, car si c true c que c déjà en place if( !current_show ){ // ici tu réinitialises tout $('.contenu .tab-content').removeClass('show-content'); $('li').removeClass('blanc'); $('.plus').attr('src', 'http://localhost/nouveaubrainsagency/wp-content/themes/agencybrains/library/images/normalOrange.png'); // là tu modifies que ton $(this) $('#' + id + 'show').addClass('show-content'); $('#' + id + ' li').addClass('blanc'); //la croix et le plus en question // modif de canonier $(this).find('.plus').attr('src', 'http://localhost/nouveaubrainsagency/wp-content/themes/agencybrains/library/images/plusBlanc.png'); } });

enfin pour ton dom @lartak a raison aussi :)

saibe, il y a 9 ans

bref g fais du vent :)

Florian.C, il y a 9 ans

Merci beaucoup à tous d'avoir pris le temps de répondre avec autant de détails :D

Effectivement j'ai été un peu "cochon" sur le coup en mettant le a avant les li mais bon.

Du coup voici la solution que je vais mettre en avant dans mon ca :

Un variable récupère le ".plus" selectionné. Et bien sur avant il retire la class à tout le monde.

//animation des menus solutions $('.tab').click(function(e) { e.preventDefault(); var id = $(this).attr('id'); var current_show = $('#' + id + 'show').hasClass('show-content'); var plus = $(this).find('.plus'); $('.contenu .show-content').removeClass('show-content'); $('li').removeClass('blanc'); $('.plus').attr('src', 'http://localhost/nouveaubrainsagency/wp-content/themes/agencybrains/library/images/normalOrange.png'); if( !current_show ){ $('#' + id + 'show').addClass('show-content'); $('#' + id + ' li').addClass('blanc'); $(plus).attr('src', 'http://localhost/nouveaubrainsagency/wp-content/themes/agencybrains/library/images/plusBlanc.png'); } });