skip to Main Content

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


  1. 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. 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