Solution for Javascript Loop based on PHP Loop
is Given Below:
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");
});
});
Since each card has the same class card
, you can create an event for all of them using the same class:
$(document).ready(function(){
// event on hover for each card
$(".card").hover(function(){
// Get the id number of this card
const id = $(this).attr("id").split("-")[1];
// Now replace id number inside the code
$("#popup-" + id).css("opacity", "1");
}, function(){
// Get the id number of this card
const id = $(this).attr("id").split("-")[1];
// Now replace id number inside the code
$("#popup-" + id).css("opacity", "0");
});
});
Just use data attributes, no need to dupe code
function toggle(elem, state) {
var toggleSlector = $(elem).data("toggles");
var toggledElem = $(toggleSlector).toggleClass("active", state);
}
$("[data-toggles]").on("mouseenter", function () {
toggle(this, true);
}).on("mouseleave", function () {
toggle(this, false);
});
.popup {
display: none;
}
.popup.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card" id="card-01" data-toggles="#popup-01">
<h4 class="post-title">“One”</h4>
</div>
<div class="popup" id="popup-01">
Foo 1
</div>
<div class="card" id="card-02" data-toggles="#popup-02">
<h4 class="post-title">“Two”</h4>
</div>
<div class="popup" id="popup-02">
Foo 2
</div>
If you are rendering is right beside, no need to use use JavaScript.
.popup {
display: none;
}
.card:hover + .popup {
display: block;
}
<div class="card" id="card-01">
<h4 class="post-title">“One”</h4>
</div>
<div class="popup" id="popup-01">
Foo 1
</div>
<div class="card" id="card-02">
<h4 class="post-title">“Two”</h4>
</div>
<div class="popup" id="popup-02">
Foo 2
</div>