Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
369 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Condition jQuery dans boucle Wordpress

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Condition jQuery dans boucle Wordpress

n°2336808
a44icus
Posté le 17-07-2019 à 00:06:17  profilanswer
 

Bonsoir,
 
J'ai une page wordpress avec des produits qui s'affichent grâce à une boucle.  
 
Quand je clique sur l'un des produits je dois afficher des informations liées à ce produit issue de la même boucle et qui sont de base cachées avec un display:none.
 
J'aimerai simplement pouvoir afficher les informations de chacun de ces produits lorsque je clique sur l'un d'eux.
 
Mon problème est que je n'arrive pas à faire disparaître les info d'un quand je clique sur un autre.
 
J'imagine que quelqu'un à la solution et je l'en remercie d'avance.

Code :
  1. <div class="row">
  2. <?php
  3. $args = array(
  4. 'post_type' => array('cuvees'),
  5. 'cat' => $id_cat,
  6. 'orderby'=> 'title',
  7. 'order' => 'ASC'
  8. );
  9. $my_query=new WP_Query($args);
  10. while ( $my_query->have_posts() ) : $my_query->the_post();
  11. ?>
  12. <script>
  13. jQuery(document).ready(function($) {
  14.  $(".the-cuvee<?php the_ID(); ?>" ).hover(function() {
  15.    $("#liseret" ).css({fill : "<?php the_field('couleur'); ?>"});
  16.  });
  17.   $(".the-cuvee<?php the_ID(); ?>" ).click(function() {
  18.    $(".modal<?php the_ID(); ?>" ).show();
  19.    }, function() {
  20.    $(".modal<?php the_ID(); ?>" ).hide();
  21.   });
  22. });
  23. </script>
  24. <div class="col the-cuvee the-cuvee<?php the_ID(); ?>">
  25.  <img class="img-fluid" src="<?php the_field('photo'); ?>" style="max-height: 500px;">
  26.  <h3>Cuvée</h3>
  27.  <h2 style="color:<?php the_field('couleur'); ?>;"><?php the_title() ?></h2>
  28. </div>
  29.  <div class="row modal<?php the_ID(); ?>" style="display: none; position: absolute;">
  30.  <p><?php the_field('description'); ?></p>
  31.  <p><?php the_field('caracteristiques'); ?></p>
  32.  <p><?php the_field('accords'); ?></p>
  33.  <a href="<?php the_field('pdf'); ?>">Fiche technique</a>
  34.  </div>
  35. <?php endwhile; ?>
  36. </div>

mood
Publicité
Posté le 17-07-2019 à 00:06:17  profilanswer
 

n°2336861
mechkurt
Posté le 17-07-2019 à 15:31:39  profilanswer
 

Hum lol, tu répètes ton code JavaScript pour chaque produit !?
 
Tu utilises des classes pour des choses qui sont manifestement unique (puicque postfixé avec ton id produit) ?!
 
Du coups tes modal sont stylé en css avec .modal1, .modal,2,.modal3 avec tout tes ids produits ? ^^
 
J’espère que t'est en mode bricolage ou que tu débutes dans le métier pacque là...
 

Code :
  1. <div id="MyCuvees" class="row">
  2. <?php
  3. $args = array(
  4. 'post_type' => array('cuvees'),
  5. 'cat' => $id_cat,
  6. 'orderby'=> 'title',
  7. 'order' => 'ASC'
  8. );
  9. $my_query=new WP_Query($args);
  10. while ( $my_query->have_posts() ) : $my_query->the_post();
  11. ?>
  12. <div class="col the-cuvee" data-id="<?php the_ID(); ?>" data-fill="<?php the_field('couleur'); ?>">
  13.  <img class="img-fluid" src="<?php the_field('photo'); ?>" style="max-height: 500px;">
  14.  <h3>Cuvée</h3>
  15.  <h2 style="color:<?php the_field('couleur'); ?>;"><?php the_title() ?></h2>
  16. </div>
  17.     <div class="row modal" style="display: none; position: absolute;">
  18.  <p><?php the_field('description'); ?></p>
  19.  <p><?php the_field('caracteristiques'); ?></p>
  20.  <p><?php the_field('accords'); ?></p>
  21.  <a href="<?php the_field('pdf'); ?>">Fiche technique</a>
  22. </div>
  23. <?php endwhile; ?>
  24. </div>
  25. <script>
  26. jQuery(document).ready(function($) {
  27. //ecouteur d'évenement sur le conteneur
  28. $('#MyCuvees').on({
  29.  mouseenter: function () {
  30.   $("#liseret" ).css({fill : $(this).data('fill')});
  31.  },
  32.  mouseleave: function () {
  33.   //$("#liseret" ).css({fill : '#FFFFFF'});
  34.  },
  35.  click: function () {
  36.   //masque tous
  37.   $('#MyCuvees div.modal').hide();
  38.   //affiche la mdoal suivant le div cliqué
  39.   $(this).next().show();
  40.  }
  41. }, '.the-cuvee');
  42. });
  43. </script>


Sortir ton script de ta boucle, utiliser des classes générique et déléguer les événements ce sera déjà mieux...
 
https://api.jquery.com/on/
https://api.jquery.com/data/
https://api.jquery.com/next/
 
 
Désolé pour le ton que j'ai employé, on est tous passé par de l'apprentissage, on vas dire que j'ai eu une sale matinée...
 


---------------
D3
n°2337423
a44icus
Posté le 29-07-2019 à 21:20:07  profilanswer
 

Hello,
 
Effectivement je ne suis pas pro dans le domaine du javascript et j'avoue que mon code était en bordel ^^ j'en pouvais plus de chercher..  
Merci énormément, ça marche exactement comme je le souhaitais.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Condition jQuery dans boucle Wordpress

 

Sujets relatifs
Mettre du texte en couleur sous Wordpress[Résolu] [Wordpress][Config] Erreurs redirections vers sous-dossier
Soustraction recherchev en boucleConvertir un tableau Wordpress en format mobile AMP
Afficher des valeurs d'une colonne à l'autre selon conditionaide Spring boot /jquery /api
Boucle foreachErreur en fin de boucle ?
envoie de mail wordpress[DEBUTANT] Condition pour ouvrir un fichier ne fonctionne pas
Plus de sujets relatifs à : Condition jQuery dans boucle Wordpress


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR