Condition jQuery dans boucle Wordpress

Marsh Posté le 17-07-2019 à 00:06:17

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 :

<div class="row">
<?php
$args = array(
'post_type' => array('cuvees'),
'cat' => $id_cat,
'orderby'=> 'title',
'order' => 'ASC'
);
$my_query=new WP_Query($args);
while ( $my_query->have_posts() ) : $my_query->the_post();
?>
<script>
jQuery(document).ready(function($) {
$(".the-cuvee<?php the_ID(); ?>" ).hover(function() {
$("#liseret" ).css({fill : "<?php the_field('couleur'); ?>"});
});
$(".the-cuvee<?php the_ID(); ?>" ).click(function() {
$(".modal<?php the_ID(); ?>" ).show();
}, function() {
$(".modal<?php the_ID(); ?>" ).hide();
});
});
</script>
<div class="col the-cuvee the-cuvee<?php the_ID(); ?>">
<img class="img-fluid" src="<?php the_field('photo'); ?>" style="max-height: 500px;">
<h3>Cuvée</h3>
<h2 style="color:<?php the_field('couleur'); ?>;"><?php the_title() ?></h2>
</div>
<div class="row modal<?php the_ID(); ?>" style="display: none; position: absolute;">
<p><?php the_field('description'); ?></p>
<p><?php the_field('caracteristiques'); ?></p>
<p><?php the_field('accords'); ?></p>
<a href="<?php the_field('pdf'); ?>">Fiche technique</a>
</div>
<?php endwhile; ?>
</div>

Reply

Marsh Posté le 17-07-2019 à 00:06:17

Reply

Marsh Posté le 17-07-2019 à 15:31:39

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 :

<div id="MyCuvees" class="row">
<?php
$args = array(
'post_type' => array('cuvees'),
'cat' => $id_cat,
'orderby'=> 'title',
'order' => 'ASC'
);
$my_query=new WP_Query($args);
while ( $my_query->have_posts() ) : $my_query->the_post();
?>
<div class="col the-cuvee" data-id="<?php the_ID(); ?>" data-fill="<?php the_field('couleur'); ?>">
<img class="img-fluid" src="<?php the_field('photo'); ?>" style="max-height: 500px;">
<h3>Cuvée</h3>
<h2 style="color:<?php the_field('couleur'); ?>;"><?php the_title() ?></h2>
</div>
<div class="row modal" style="display: none; position: absolute;">
<p><?php the_field('description'); ?></p>
<p><?php the_field('caracteristiques'); ?></p>
<p><?php the_field('accords'); ?></p>
<a href="<?php the_field('pdf'); ?>">Fiche technique</a>
</div>
<?php endwhile; ?>
</div>
<script>
jQuery(document).ready(function($) {
//ecouteur d'évenement sur le conteneur
$('#MyCuvees').on({
mouseenter: function () {
$("#liseret" ).css({fill : $(this).data('fill')});
},
mouseleave: function () {
//$("#liseret" ).css({fill : '#FFFFFF'});
},
click: function () {
//masque tous
$('#MyCuvees div.modal').hide();
//affiche la mdoal suivant le div cliqué
$(this).next().show();
}
}, '.the-cuvee');
});
</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

Reply

Marsh Posté le 29-07-2019 à 21:20:07

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.

Reply

Condition jQuery dans boucle Wordpress

Sujets relatifs:

Leave a Replay