时间戳

首页 > 解决方案 > 基于 PHP 循环的 Javascript 循环

javascript - 基于 PHP 循环的 Javascript 循环

问题描述

我需要帮助创建一个 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">“&lt;?php echo get_the_title(); ?>”&lt;/h4>
   </div>
<?php }?>
    
<div class="popup" id="popup-0<?php echo $counter++; ?>">
   <h4 class="post-title">“&lt;?php echo get_the_title(); ?>”&lt;/h4>
   <p class="blurb"><?php echo get_field('blurb'); ?></p>
</div>

这是我的 Javascript 来显示/隐藏每个弹出窗口，但是由于我不知道在 PHP 循环中会生成多少弹出窗口，所以我需要这个循环，每个循环都会逐渐改变#past-card-01和#popup-01（01、02、03 等）。 ) 基于生成的数量。

或者，如果有办法获取悬停的元素类或 id，然后使用该信息更改 .hover 函数适用的内容。

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

标签： javascriptphphtmlwordpress

解决方案

只需使用数据属性，无需重复代码

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”&lt;/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”&lt;/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”&lt;/h4>
</div>

<div class="popup" id="popup-01">
  Foo 1
</div>

<div class="card" id="card-02">
  <h4 class="post-title">“Two”&lt;/h4>
</div>

<div class="popup" id="popup-02">
  Foo 2
</div>

推荐阅读