Question 165425 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Can WordPress use a Javascript Loop based on a PHP Loop?

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");
    });
  });
Tags:

2

Answers


  1. 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>
    Login or Signup to reply.
  2. 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");
  });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search