时间戳

首页 > 解决方案 > 尝试在 Wordpress PHP 循环中运行一些 jQuery 来定位动态标题并使用 jQuery 中的 Circle 库围绕鼠标旋转标题

javascript - 尝试在 Wordpress PHP 循环中运行一些 jQuery 来定位动态标题并使用 jQuery 中的 Circle 库围绕鼠标旋转标题

问题描述

在 WordPress 中，我正在尝试使用 jQuery 根据其 post_id 从 WPQuery 中获取动态标题。然后，我使用 jQuery 来显示鼠标，并根据基于 post_id 的针对动态 div 的悬停函数来跟踪帖子的标题。最后，我使用了一个圆形函数来使标题围绕鼠标旋转。

我已经让它工作了，但它非常有问题。当我在循环中没有脚本时，它只会识别页面上的最后一个帖子标题。我将在下面添加我的代码。感觉好像 jQuery 函数在循环，并且没有按应有的方式运行。当鼠标进入一个新的 div 时，标题会发生变化，但是，圆圈​​似乎变大了，感觉有问题。当不在循环中时，它适用于目标 div。只是在循环内部时它可能正在循环。我对带有 WP 的 jQuery 的理解不是应该的，所以可能有人会立即注意到一些东西。谢谢。

因为它现在有效。圆形标题似乎在半径上上下跳跃，并且 .circle css 不会让它旋转。然而，CSS 是我最不担心的。再次感谢。

 <head>
   <script src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous">
   </script>  
  <script src="https://cdn.jsdelivr.net/npm/circletype@2.3.0/dist/circletype.min.js">. 
  </script>
 </head>

<style>
.circle {
  -webkit-animation: rotating 10s linear infinite;
  -moz-animation: rotating 10s linear infinite;
  -ms-animation: rotating 10s linear infinite;
  animation: rotating 10s linear infinite;
}
</style>

  <div class="main">

   <?php
     $the_query = new WP_Query( array(
         'post_type' => 'works',
         'posts_per_page' => -1,
         'order' => 'ASC'
       )
     );
   ?>

     <?php if(have_posts()) : ?>
         <?php  while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
           <?php $postId = get_the_ID(); ?>              
           <?php if(has_post_thumbnail()) : ?>
              <div class="row">
                <div class="col-12 home-container" id="home-container-<?php echo $postId ?>">
                   <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a>
                   <div class="home-title">
                    <h6 id="<?php echo $postId ?>" class="circle">
                     <p><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></p>
                     <p><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></p>
                    </h6>
                   </div>

                </div>
              </div>

             <script>
               // make circle on element based on entering it's unique div id
               $("div#home-container-<?php echo json_encode($postId); ?>").mouseenter(function(){
                 new CircleType(document.getElementById(<?php echo json_encode($postId); ?>));
               });
             </script>
             <script>                  
               // follow mouse code based on class
               $("div#home-container-<?php echo json_encode($postId); ?>").mousemove(function(e){
                   $(".circle").offset({left:e.pageX - 70, top:e.pageY - 70});
               });
             </script>

          <?php endif; ?>
           <!-- hidden until required for mouse hover
              <h3><php the_title(); ?></h3> -->
       <?php endwhile; ?>
   <?php else : ?>
       <?php echo wpautop('Sorry, No projects found. Check back soon'); ?>
   <?php endif; ?>
</div>

标签： javascriptphpjquerywordpress

解决方案

$(".circle")在整个文档中选择该类的所有元素。

您需要将其限制在祖先元素的范围内。

（可以使用.find() from祖先元素来完成，也可以通过在选择器之后传递一个contextinto$(…)作为第二个参数来完成。）

推荐阅读