Блог

Главная - Вопросы по программированию - Цикл Javascript на основе цикла PHP

Цикл Javascript на основе цикла PHP

#javascript #php #html #wordpress

Вопрос:

Мне нужна помощь в создании фрагмента javascript для отображения каждого отдельного всплывающего окна при наведении указателя мыши на заголовок каждой карточки. Карта 1 показывает всплывающее окно 1, карта 2 показывает всплывающее окно 2 и т.д.

Цикл HTML/PHP настраивает несколько всплывающих окон. Количество всплывающих окон меняется в зависимости от того, сколько пользовательских сообщений (WordPress) было создано.

 <?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>

Это мой Javascript для отображения/скрытия каждого всплывающего окна, однако, поскольку я не знаю, сколько всплывающих окон будет сгенерировано в цикле PHP, мне нужно, чтобы каждый цикл изменялся #past-card-01 и #popup-01 постепенно (01, 02, 03 и т.д.) В зависимости от того, сколько было сгенерировано.

Или, если бы был способ получить класс или идентификатор элемента, на который наводится курсор, а затем использовать эту информацию для изменения того, к чему применяется функция .hover.

 $(document).ready(function(){
    $("#card-01").hover(function(){
      $("#popup-01").css("opacity", "1");
      }, function(){
      $("#popup-01").css("opacity", "0");
    });
  });

Ответ №1:

Поскольку каждая карта имеет один и тот же класс card , вы можете создать событие для всех них, используя один и тот же класс:

 $(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");
  });
});

Ответ №2:

Просто используйте атрибуты данных, не нужно обманывать код

 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>

Если вы рендерите прямо рядом, не нужно использовать 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>
Метки: