I need help creating a javascript snippet to show each individual popup when hovering over each card title. Card 1 shows popup 1, card 2 shows popup 2, etc.
HTML/PHP loop setting up multiple popups. The number of popups change depending on how many custom posts (WordPress) have been created.
<?php while ($post_query->have_posts()) {?>
<?php $post_query->the_post();?>
<div class="card" id="card-0<?php echo $counter; ?>">
<h4 class="post-title">“<?php echo get_the_title(); ?>”</h4>
</div>
<?php }?>
<div class="popup" id="popup-0<?php echo $counter++; ?>">
<h4 class="post-title">“<?php echo get_the_title(); ?>”</h4>
<p class="blurb"><?php echo get_field('blurb'); ?></p>
</div>
This is my Javascript to show/hide each popup, however since I don’t know how many popups will be generated in the PHP loop, I need this to loop with each loop changing the #past-card-01
and #popup-01
incrementally (01, 02, 03, etc.) based on how many were generated.
Or, if there was a way to get the element class or id that is being hovered and then use that information to change what the .hover function applies to.
$(document).ready(function(){
$("#card-01").hover(function(){
$("#popup-01").css("opacity", "1");
}, function(){
$("#popup-01").css("opacity", "0");
});
});
2
Answers
Just use data attributes, no need to dupe code
If you are rendering is right beside, no need to use use JavaScript.
Since each card has the same class
card
, you can create an event for all of them using the same class: