В WordPress я пытаюсь использовать jQuery для получения динамического c заголовка из WPQuery на основе его post_id. Затем я использую jQuery для отображения мыши и следую за заголовком поста, основываясь на функции наведения, предназначенной для динамического c div на основе post_id. Наконец, я использую функцию круга, чтобы заставить заголовок вращаться вокруг мыши.
У меня это работает, но оно довольно глючное. Когда у меня не было сценария внутри l oop, он определял только заголовок последних сообщений на странице. Я добавлю свой код ниже. Такое ощущение, что функции jQuery находятся в цикле и работают не так, как должны. Заголовок изменяется, когда мышь входит в новый элемент div, однако, кажется, что круг увеличивается в размере и чувствует себя глючным. Он работал нормально для целевого div, когда не в l oop. Это просто когда внутри l oop это может зацикливаться. Мое понимание 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>