Condition jQuery dans boucle Wordpress

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Condition jQuery dans boucle Wordpress

a44icus

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>

Publicité

mechkurt

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

a44icus

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.

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 boucle	Convertir un tableau Wordpress en format mobile AMP
Afficher des valeurs d'une colonne à l'autre selon condition	aide Spring boot /jquery /api
Boucle foreach	Erreur 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

Page générée en 0.058 secondes