我根据术语创建了一个帖子循环，每个术语都有一个块，如下所示：

-

术语标题

该学期一篇帖子的特色图片

该任期的所有职位列表

-

现在我用了3个术语，所以这个内容有3个区块。其思想是，当您悬停某个术语中某个帖子的标题时，特征图像将更改为悬停帖子中的图像。

这是（某种程度上）可行的，但当我悬停在帖子标题上时，所有图像都会发生变化，而不仅仅是它们所属的块中的图像。我认为这是因为我需要在Jquery中使用唯一ID而不是类，但我不知道如何将ID转换为Jquery（我正在学习在构建过程中编写代码）

PHP代码

//Loop throug each taxonomy terms, 
    foreach ( $terms as $term ) { 
        //Query argument for post
    $args = array( 
            \'post_type\' => \'technology\', // Or Custom Post Type, 
            \'order\' => \'DESC\', 
            \'orderby\' => \'date\',
            \'taxonomy\' => $tax,
            \'term\' => $term->slug, // Query posts for each term based on term slug
            \'orderby\' => \'date\',
            \'order\' => \'ASC\', 
        );
        $query = new WP_Query( $args ); 
        $posts = $query->get_posts();

        $cat_icon = get_term_meta( $term->term_id, \'category-icon\', true );
        $cat_iconUrl = ( ( $cat_icon != \'\' ) ? wp_get_attachment_url( $cat_icon ) : \'\' );

        ?>

<div class="container-fluid tech-cat-item py-5">
    <div class="container">
    <div class="row align-items-center pb-3">
    <div class="col-1">
    <img class="img-fluid" src="<?php echo $cat_iconUrl; ?>">
</div>
<div class="col-11">
    <h3><?php echo $term->name;?></h3>
</div>
</div>
<?php
       $ga_item = array(
            \'post_type\' => \'technology\', // Or Custom Post Type, 
            \'taxonomy\' => $tax,
            \'term\' => $term->slug, // Query posts for each term based on term slug
            \'posts_per_page\' => \'1\',
            \'orderby\' => \'date\',
            \'order\' => \'ASC\', 
);
       $ga_query = new WP_Query( $ga_item ); 
       $ga_posts = $query->get_posts();
    if ( $ga_query->have_posts() ) {
    while ( $ga_query->have_posts() ) {
$ga_query->the_post(); ?>
    <div class="row ga-panel py-5">
    <div class="col-12">
        <?php 
        $ga_url = get_the_post_thumbnail_url($post->ID,\'full\'); ?>
        <img id="<?php the_ID($post->ID); ?>" class="img-fluid ga-img" src="<?php echo esc_url($ga_url);?>">
    </div>
    </div>
<?php }
}
wp_reset_query();
?>
    <div class="row">
        <?php 
        if ( $posts ) {
         foreach ( $posts as $post ) { ?>
             <div class="col-4 ga-links py-1">
                <a id="<?php the_ID($post->ID); ?>" href="<?php the_permalink( $post->ID ); ?>" data-swap="<?php the_post_thumbnail_url($post->ID,\'full\'); ?>" > <?php echo $post->post_title; ?></a>
            </div>
         <?php        
            }
        }
       ?>
</div>
</div>
</div>
  <?php  }
 wp_reset_query();
?>

EDIT

我发现了如何在jquery中使用变量作为ID，但现在jquery只在第一个img实例上工作。无论我将鼠标悬停到哪个链接，图像都会发生变化，但在第一个图像。。。。

New Jquery代码：

jQuery(document).ready(function () {
jQuery(\'.ga-links a\').hover(function(){
    var id = jQuery(\'.ga-img\').attr("id");
        jQuery(\'#\' + id).attr(\'src\',this.getAttribute(\'data-swap\'));
         console.log(id);
});
})

（任何关于清理代码的建议，或更好的方法，我都很感激。我正在学习，这个奇怪的查询是我想要做的最好的方法，哈哈）

<img class="img-fluid ga-img ga-img-<?php echo $term->slug; ?>" src="<?php echo esc_url($ga_url);?>">

<a href="<?php the_permalink( $post->ID ); ?>" data-swap="<?php the_post_thumbnail_url($post->ID,\'full\'); ?>" data-term="<?php echo $term->slug; ?>" >
    <?php echo $post->post_title; ?>
</a>

jQuery(document).ready(function () {

  jQuery(\'.ga-links a\').hover(function() {
    var currentTerm = jQuery(this).data(\'term\'),
        swapImage = jQuery(this).data("swap");
    jQuery(\'.ga-img-\' + currentTerm).attr(\'src\', swapImage);      
  });

});