在 WordPress 中，我尝试使用 jQuery 根据其 post_id 从 WPQuery 中获取动态标题。然后，我使用 jQuery 使鼠标显示并基于悬停函数(针对基于 post_id 的动态 div)跟踪帖子标题。最后，我使用 Circle 函数使标题围绕鼠标旋转。
我已经可以使用它了，但是有很多问题。当我在循环内没有脚本时，它只识别页面上的最后一个帖子标题。我将在下面添加我的代码。感觉好像 jQuery 函数正在循环，并且没有按照应有的方式运行。当鼠标进入新的 div 时，标题会发生变化，但是，圆圈的大小似乎会增加并且感觉有问题。当目标 div 不在循环中时，它工作得很好。只是当在循环内部时它可能会循环。我对 jQuery 和 WP 的理解并不到位，所以可能有人会立即注意到一些事情。谢谢。
现在就可以了。圆形标题似乎在半径范围内上下跳跃，并且 .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>
最佳答案
$(".circle") 选择整个文档中具有该类的所有元素。
您需要将其限制在祖先元素的范围内。
(可以使用来自祖先元素的 .find() 来完成，或者通过将 context 传递到 $( …) 作为选择器之后的第二个参数。)
关于javascript - 尝试在 WordPress PHP 循环中运行一些 jQuery 以定位动态标题并使用 jQuery 中的 Circle 库围绕鼠标旋转标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60506846/