Partage
  • Partager sur Facebook
  • Partager sur Twitter

Variable dans Selecteur jQuery

La bonne syntaxe !!??

Sujet résolu
    25 novembre 2010 à 11:13:14

    Bonjours, j'ai essayé par plusieurs moyen mais rien à faire !
    Je trouve nul par comment insérer une variable dans un selecteur jquery

    j'explique :

    var num = "<?php the_ID(); ?>"; //Je déclare ma variable
    
    		jQuery(document).ready(
    			
    			function() {
    				$(".date").hide();
    				$("#billet-("+num+")").hover( // Et a plusieurs endroit je veut appeler la varaible
    					function() {
    						$("#date-("+num+")").fadeIn("slow");
    					},
    					function() {
    						$("#date-("+num+")").fadeOut("slow");
    					}
    				);
    			}
    		);
    


    Enfaite j'aimerai avoir la bonne syntaxe !

    Merci d'avance !
    • Partager sur Facebook
    • Partager sur Twitter
    Un vrai maître est un éternel étudiant. Yi
      25 novembre 2010 à 11:16:43

      C'est bien comme tu as fait, avec le + pour concaténer.

      Tu as des erreurs pour croire que ce n'est pas la bonne syntaxe ?
      • Partager sur Facebook
      • Partager sur Twitter
        25 novembre 2010 à 11:18:26

        Non aucune erreur!
        Il n'y a rien qui se passe enfaite ! :(
        • Partager sur Facebook
        • Partager sur Twitter
        Un vrai maître est un éternel étudiant. Yi
          25 novembre 2010 à 11:19:35

          C'est qu'il y a un souci avec ta fonction PHP. Est-ce qu'elle a bien un return ? Essaye en rajoutant un echo avant the_ID().
          • Partager sur Facebook
          • Partager sur Twitter
            25 novembre 2010 à 11:23:33

            Toujours rien avec echo !
            Enfaite "<?php the_ID(); ?>" appartient à Wordpress, donc je vois pas ce que tu veut dire à propos de return !
            • Partager sur Facebook
            • Partager sur Twitter
            Un vrai maître est un éternel étudiant. Yi
              25 novembre 2010 à 11:29:02

              En fait je pense que "<?php the_ID(); ?>" doit être exécuté comme une simple chaîne et non comme un appel à PHP.

              Essaye directement comme ça :
              function() {
              	$("#date-('<?php the_ID(); ?>')").fadeIn("slow");
              },
              
              • Partager sur Facebook
              • Partager sur Twitter
                25 novembre 2010 à 11:36:43

                Merci pour ton aide mais malheureusement toujours sans succès !

                Enfaite je vais être un peut plus claire sur le sujet !

                J'ai ma parti Wordpress ou j'ai

                <div class="date" id="date-<?php the_ID(); ?>">

                En gros chaque billet a un id diffèrent et donc je peut appliquer un style diffèrent pour chacun !

                Et donc avec le jQuery j'ai envie de faire apparaitre la date au survole du poste !


                • Partager sur Facebook
                • Partager sur Twitter
                Un vrai maître est un éternel étudiant. Yi
                  25 novembre 2010 à 11:49:29

                  Effectivement je comprends déjà mieux. Comment tu comptes récupérer la date du post survolé ? Tu peux montrer un code HTML d'un post quelconque stp...
                  • Partager sur Facebook
                  • Partager sur Twitter
                    25 novembre 2010 à 11:59:23

                    Donc tien sa donne ca coté PHP :

                    <?php if (have_posts()) : ?>
                    		<?php while (have_posts()): the_post(); ?>
                    		<div class="billet" id="billet-<?php the_ID(); ?>">
                    			<div class="titrebillet">
                    			
                    				<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    				<div class="date" id="date-<?php the_ID(); ?>"><span><?php the_time('d M Y'); ?></span></div> 
                    			</div>
                    			<p><?php the_excerpt(); ?></p>
                    			<a  class="lien" href="<?php the_permalink(); ?>">Lire la suite</a>
                    			
                    			 Ecrit par <?php the_author(); ?> le 
                    			<p class="metabillet"><?php comments_popup_link('Pas de commentaires', '1 Commentaire', '% Commentaires'); ?></p>
                    		</div>
                    		<?php endwhile; ?>
                    	<?php endif; ?>
                    


                    Et ce que le navigateur peut traduire pour un article en :

                    <div class="billet" id="billet-1">
                    			<div class="titrebillet">
                    			
                    				<h2><a href="http://localhost/wordpress/?p=1">Bonjour tout le monde&nbsp;!</a></h2>
                    				<div style="display: none;" class="date" id="date-1"><span>24 nov 2010</span></div> 
                    			</div>
                    			<p></p><p>Bienvenue dans WordPress. Ceci est votre premier article. Modifiez-le ou supprimez-le, puis lancez-vous&nbsp;!</p>
                    
                    			<a class="lien" href="http://localhost/wordpress/?p=1">Lire la suite</a>
                    			
                    			 Ecrit par admin le 
                    			<p class="metabillet"><a href="http://localhost/wordpress/?p=1#comments" title="Commentaire sur Bonjour tout le monde&nbsp;!">1 Commentaire</a></p>
                    		</div>
                    


                    Donc on peut très bien voir que les class CSS on bien pris l'ID du post :/
                    Donc je comprend pas !
                    • Partager sur Facebook
                    • Partager sur Twitter
                    Un vrai maître est un éternel étudiant. Yi
                      25 novembre 2010 à 12:05:58

                      C'est pas simple mais c'est faisable. Je ne comprends pourquoi la date est masquée ? Ligne 5. C'est volontaire ?
                      Peux-tu faire un screen de ce que donne ce HTML à l'écran.
                      • Partager sur Facebook
                      • Partager sur Twitter
                        25 novembre 2010 à 12:12:06

                        Bien sur qui le cache car je lui demande au depart de cacher tout les dates avec $(".date").hide(); pour au survole de l'article s'affiche la date il faut bien la caché au départ !

                        Donc c'est normal !
                        Mais il doit y avoir quelque chose ! Car pour moi c'est bon si tu me dit que la syntaxe est bonne :ninja:
                        • Partager sur Facebook
                        • Partager sur Twitter
                        Un vrai maître est un éternel étudiant. Yi
                          25 novembre 2010 à 12:30:19

                          Je pense avoir trouvé, essaye ceci :

                          $(document).ready(function(){
                          	$('.billet').hover(function() {
                          		var d = $(this).find('.date:first > span').text();
                          		alert(d);
                          	});
                          });
                          
                          • Partager sur Facebook
                          • Partager sur Twitter
                            25 novembre 2010 à 12:47:43

                            Génial ! Sa marche! Quand on passe la souris sa récupère bien la date !Maintenant au lieu que sa soir un alert, il faut que sa soit l'affichage!
                            Merci je te dit si tout est bien mis en place !
                            • Partager sur Facebook
                            • Partager sur Twitter
                            Un vrai maître est un éternel étudiant. Yi
                              25 novembre 2010 à 16:25:15

                              En faite du ma dit de mettre sa
                              $(document).ready(function(){
                              	$('.billet').hover(function() {
                              		var d = $(this).find('.date:first > span').text();
                              		alert(d);
                              	});
                              });
                              


                              Et du coup sa me fait juste sortir une boite de dialogue avec la date!

                              Moi je veut presque la même chose que sa me montre sauf que sa me l'affiche en fadeIn et fadeOut pour l'effet !

                              Donc j'ai essayé ça :
                              function() {
                              				$(".date").hide();
                              				$('.billet').hover(
                              					function() {
                              						var d = $(this).find('.date:first > span').text();
                              					}
                              					function() {
                              					d.fadeIn("slow");
                              					},
                              					function() {
                              					d.fadeOut("slow");
                              					}
                              				
                              				);
                              			}
                              		);
                              


                              Et du coup rien du tout !
                              • Partager sur Facebook
                              • Partager sur Twitter
                              Un vrai maître est un éternel étudiant. Yi
                                25 novembre 2010 à 16:44:26

                                Normal. Non seulement tu mélanges tout, mais en plus tu changes l'état des variables.

                                $().ready(function() {
                                   $('.billet').hover(
                                      function() {
                                         $(this).find('.date:first > span').fadeIn("slow");
                                      },
                                      function() {
                                         $(this).find('.date:first > span').fadeOut("slow");
                                      }
                                   );
                                });
                                
                                • Partager sur Facebook
                                • Partager sur Twitter
                                Directeur technique, créateur de jeux HTML5 et fan de JavaScript | La suite de OnHack est sur les rails !
                                  25 novembre 2010 à 16:49:45

                                  Merci ! Mais sa marche toujours pas ! :-(
                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                  Un vrai maître est un éternel étudiant. Yi
                                    25 novembre 2010 à 16:57:14

                                    Ca doit être un problème de sélecteurs. Essaie comme ça :

                                    $().ready(function() {
                                       $('.billet').hover(
                                          function() {
                                             $(this).find('.date').fadeIn("slow");
                                          },
                                          function() {
                                             $(this).find('.date').fadeOut("slow");
                                          }
                                       );
                                    });
                                    


                                    Si ça ne marche toujours pas, essaie de mettre des alert (ou des console.log) dans les fonctions du hover, pour voir si les events se lancent bien.
                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                    Directeur technique, créateur de jeux HTML5 et fan de JavaScript | La suite de OnHack est sur les rails !
                                      25 novembre 2010 à 16:59:59

                                      Woooooooooooooooooww Génial sa marche impec :D ! Sujet terminé !
                                      Encore un gros merci a vous 2 et au site du zero !
                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                      Un vrai maître est un éternel étudiant. Yi
                                        25 novembre 2010 à 17:04:18

                                        Il y a un problème que je n'ai pas su résoudre. Ce code fonctionne si tu as un seul billet. Si tu en as plusieurs alors l'effet sera appliqué à toutes les dates.
                                        Je pense qu'il faut utiliser next() plutôt que find() mais je n'ai pas trouvé le bon sélecteur...

                                        EDIT : En fait c'est bon comme ça car il y a l'effet inverse lorsque tu sors du hover. Mais sinon ce n'est pas vraiment le bon sélecteur selon moi.
                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                          25 novembre 2010 à 17:19:34

                                          Le sélecteur m'a l'air bon, puisque find va chercher seulement dans les enfants du noeud. Mais je n'ai pas testé, c'est vrai.
                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                          Directeur technique, créateur de jeux HTML5 et fan de JavaScript | La suite de OnHack est sur les rails !

                                          Variable dans Selecteur jQuery

                                          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                          • Editeur
                                          • Markdown