使用 jquery 更改模态中的缩略图

Question

我有一个生成投资组合项的wordpress循环。每个项目组合项都有一个模态。

<div class="col-lg-8 col-md-12">
<div class="row">
<?php
$args = array(
'post_type' => 'portfoolio',
'posts_per_page' => 9
);
$the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php 
$postid = get_the_ID(); 
$images = get_field('galerii', $postid);
?>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 mb-4 portfolio-item">
<div class="pdf-thumb-box">
<a data-toggle="modal" data-target="#Portfolio-<?php echo $postid; ?>">
<div class="pdf-thumb-box-overlay">
<!--                                     <span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x pdf-thumb-square"></i>
<i class="fa fa-eye fa-stack-1x pdf-thumb-eye"></i>
</span> -->
</div>
<img class="img-responsive portfolio-image" src="<?php the_field('avapilt'); ?>" alt="<?php the_title(); ?>">
</a>
</div>
</div>
<!-- Modal -->
<div class="modal fade modal-large" id="Portfolio-<?php echo $postid; ?>" tabindex="-1" role="dialog" aria-labelledby="Portfolio-<?php echo $postid; ?>" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLabel"><?php the_title(); ?></h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 portfolio-main-image">
<img class="img-responsive portfolio-image" src="<?php the_field('avapilt', $postid); ?>" alt="<?php the_title(); ?>" id="portfolio-main">
</div>
<div class="col-md-6">
<?php the_content(); ?>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<?php foreach( $images as $image ): ?>
<div class="col-md-4">
<img class="portfolio-preview" src="<?php echo $image['sizes']['large']; ?>">
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>  
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?> 
</div>
</div>

在模态页脚中，有一个来自项目组合项图片的画廊。当我单击图库缩略图时，图片以更大的尺寸显示在正文中。

$('.portfolio-preview').on('click',  function() {
$('#portfolio-main').prop('src', this.src);
});

但是jquery只适用于第一个投资组合模态。当我打开另一个项目组合项时，脚本不再工作。有什么想法吗？

Answer 1

以下方法有效吗？

$(document).on('click', '.portfolio-preview', function() {
$('#portfolio-main').prop('src', this.src);
});